@pingux/astro 2.74.0-alpha.1 → 2.74.0-alpha.3

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

@@ -12,6 +12,7 @@ export declare const Default: {
         };
     };
 };
+export declare const HeaderAndFooter: (args: any) => React.JSX.Element;
 export declare const CardWidth: {
     (args: any): React.JSX.Element;
     parameters: {

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InteractiveCard = exports.Default = exports.CardWidth = exports.CardRow = void 0;
+exports["default"] = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -46,6 +46,37 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Card, args);
 };
 exports.Default = Default;
+var HeaderAndFooter = function HeaderAndFooter(args) {
+  var textStyling = {
+    fontSize: 'md',
+    fontWeight: 600
+  };
+  return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
+    variant: "cards.flat",
+    width: "500px"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "cards.header"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: textStyling
+  }, "Optional Card Header")), (0, _react2.jsx)(_index.Box, {
+    variant: "cards.body"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: textStyling,
+    mb: "md"
+  }, "Card Body"), (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Button, {
+    sx: {
+      width: 'fit-content'
+    },
+    variant: "primary"
+  }, "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, {
+    variant: "cards.footer"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: textStyling
+  }, "Optional Card Footer")));
+};
+exports.HeaderAndFooter = HeaderAndFooter;
 var CardWidth = function CardWidth(args) {
   return (0, _react2.jsx)(_index.Box, {
     gap: "40px",

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

@@ -40,5 +40,30 @@ declare const _default: {
         flex: string;
         p: string;
     };
+    header: {
+        p: number;
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+    footer: {
+        borderTop: string;
+        borderTopColor: string;
+        p: number;
+    };
+    flat: {
+        p: number;
+        boxShadow: string;
+        border: string;
+        borderColor: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
+    body: {
+        p: number;
+    };
 };
 export default _default;

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

@@ -48,8 +48,32 @@ var interactive = _objectSpread(_objectSpread({}, container), {}, {
     borderColor: 'active'
   }
 });
+var flat = _objectSpread(_objectSpread({}, container), {}, {
+  p: 0,
+  boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: '16px'
+});
+var header = {
+  p: 24,
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.90'
+};
+var footer = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.90',
+  p: 24
+};
+var body = {
+  p: 24
+};
 var _default = {
   container: container,
-  interactive: interactive
+  interactive: interactive,
+  header: header,
+  footer: footer,
+  flat: flat,
+  body: body
 };
 exports["default"] = _default;

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

@@ -12,7 +12,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.CustomColor = void 0;
+exports["default"] = exports.Default = exports.CustomSize = exports.CustomColor = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -73,4 +74,10 @@ var CustomColor = function CustomColor() {
     color: "neutral.50"
   });
 };
-exports.CustomColor = CustomColor;
+exports.CustomColor = CustomColor;
+var CustomSize = function CustomSize(args) {
+  return (0, _react2.jsx)(_index.Loader, (0, _extends2["default"])({}, args, {
+    size: 32
+  }));
+};
+exports.CustomSize = CustomSize;

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

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Card } from '../../index';
+import { Box, Button, Card, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import CardReadme from './Card.mdx';
 import { cardArgTypes } from './cardAttributes';
@@ -37,6 +37,36 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Card, args);
 };
+export var HeaderAndFooter = function HeaderAndFooter(args) {
+  var textStyling = {
+    fontSize: 'md',
+    fontWeight: 600
+  };
+  return ___EmotionJSX(Card, _extends({}, args, {
+    variant: "cards.flat",
+    width: "500px"
+  }), ___EmotionJSX(Box, {
+    variant: "cards.header"
+  }, ___EmotionJSX(Text, {
+    sx: textStyling
+  }, "Optional Card Header")), ___EmotionJSX(Box, {
+    variant: "cards.body"
+  }, ___EmotionJSX(Text, {
+    sx: textStyling,
+    mb: "md"
+  }, "Card Body"), ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Button, {
+    sx: {
+      width: 'fit-content'
+    },
+    variant: "primary"
+  }, "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, {
+    variant: "cards.footer"
+  }, ___EmotionJSX(Text, {
+    sx: textStyling
+  }, "Optional Card Footer")));
+};
 export var CardWidth = function CardWidth(args) {
   return ___EmotionJSX(Box, {
     gap: "40px",

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

@@ -41,7 +41,31 @@ var interactive = _objectSpread(_objectSpread({}, container), {}, {
     borderColor: 'active'
   }
 });
+var flat = _objectSpread(_objectSpread({}, container), {}, {
+  p: 0,
+  boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: '16px'
+});
+var header = {
+  p: 24,
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.90'
+};
+var footer = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.90',
+  p: 24
+};
+var body = {
+  p: 24
+};
 export default {
   container: container,
-  interactive: interactive
+  interactive: interactive,
+  header: header,
+  footer: footer,
+  flat: flat,
+  body: body
 };

package/lib/components/Loader/Loader.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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; }
@@ -63,4 +64,9 @@ export var CustomColor = function CustomColor() {
   return ___EmotionJSX(Loader, {
     color: "neutral.50"
   });
+};
+export var CustomSize = function CustomSize(args) {
+  return ___EmotionJSX(Loader, _extends({}, args, {
+    size: 32
+  }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.74.0-alpha.1",
+  "version": "2.74.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",