@pingux/astro 2.74.0-alpha.0 → 2.74.0-alpha.2

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/RockerButtonGroup/RockerButtonGroup.stories.d.ts

@@ -5,5 +5,5 @@ export default _default;
 export declare const Default: StoryFn<RockerButtonGroupProps>;
 export declare const Uncontrolled: StoryFn;
 export declare const Controlled: StoryFn;
-export declare const withCustomSelectedColors: StoryFn;
 export declare const DisabledSingleButton: StoryFn;
+export declare const customColors: StoryFn;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withCustomSelectedColors = exports["default"] = exports.Uncontrolled = exports.DisabledSingleButton = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.customColors = exports.Uncontrolled = exports.DisabledSingleButton = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -93,7 +93,23 @@ var Controlled = function Controlled() {
   }, "Maybe"));
 };
 exports.Controlled = Controlled;
-var withCustomSelectedColors = function withCustomSelectedColors() {
+var DisabledSingleButton = function DisabledSingleButton() {
+  return (0, _react2.jsx)(_index.RockerButtonGroup, {
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
+  }, (0, _react2.jsx)(_index.RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+exports.DisabledSingleButton = DisabledSingleButton;
+var customColors = function customColors() {
   return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
     name: "and",
     key: "and",
@@ -110,25 +126,8 @@ var withCustomSelectedColors = function withCustomSelectedColors() {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'accent.30',
-      color: 'yellow'
+      bg: 'decorative.4'
     }
   }, "Maybe"));
 };
-exports.withCustomSelectedColors = withCustomSelectedColors;
-var DisabledSingleButton = function DisabledSingleButton() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, {
-    defaultSelectedKey: "or",
-    disabledKeys: ['and']
-  }, (0, _react2.jsx)(_index.RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
-};
-exports.DisabledSingleButton = DisabledSingleButton;
+exports.customColors = customColors;

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/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -76,7 +76,22 @@ export var Controlled = function Controlled() {
     key: "maybe"
   }, "Maybe"));
 };
-export var withCustomSelectedColors = function withCustomSelectedColors() {
+export var DisabledSingleButton = function DisabledSingleButton() {
+  return ___EmotionJSX(RockerButtonGroup, {
+    defaultSelectedKey: "or",
+    disabledKeys: ['and']
+  }, ___EmotionJSX(RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), ___EmotionJSX(RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), ___EmotionJSX(RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+export var customColors = function customColors() {
   return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
     name: "and",
     key: "and",
@@ -93,23 +108,7 @@ export var withCustomSelectedColors = function withCustomSelectedColors() {
     name: "maybe",
     key: "maybe",
     selectedStyles: {
-      bg: 'accent.30',
-      color: 'yellow'
+      bg: 'decorative.4'
     }
   }, "Maybe"));
-};
-export var DisabledSingleButton = function DisabledSingleButton() {
-  return ___EmotionJSX(RockerButtonGroup, {
-    defaultSelectedKey: "or",
-    disabledKeys: ['and']
-  }, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
 };

package/package.json

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