@pingux/astro 2.154.1-alpha.1 → 2.155.0-alpha.0

package/lib/cjs/components/Card/Card.mdx

@@ -29,4 +29,8 @@ These keys provide additional functionality to the Interactive Card components.
 | Keys | Functions |
 | ---- | --------- |
 | Space or Enter | Selects the button. |
-| Tab | Focuses the button and follows the page tab sequence.|
+| Tab | Focuses the button and follows the page tab sequence.|
+
+### Note
+
+Use variant "cards.withShadow" to apply box-shadow on Card component.

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

@@ -34,3 +34,4 @@ export declare const InteractiveCard: {
 };
 export declare const WithInteractiveContent: (args: any) => React.JSX.Element;
 export declare const RadioGroupCard: (args: any) => React.JSX.Element;
+export declare const WithShadow: (args: any) => React.JSX.Element;

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.WithInteractiveContent = exports.RadioGroupCard = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
+exports["default"] = exports.WithShadow = exports.WithInteractiveContent = exports.RadioGroupCard = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = 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"));
@@ -206,4 +206,13 @@ var RadioGroupCard = function RadioGroupCard(args) {
     isInteractiveWithin: false
   }), "Active Card");
 };
-exports.RadioGroupCard = RadioGroupCard;
+exports.RadioGroupCard = RadioGroupCard;
+var WithShadow = function WithShadow(args) {
+  return (0, _react2.jsx)(_index.Box, {
+    bg: "backgroundSecondary",
+    p: "40px"
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
+    variant: "cards.withShadow"
+  })));
+};
+exports.WithShadow = WithShadow;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/cards.d.ts

@@ -11,5 +11,19 @@ declare const cards: {
         boxShadow: string;
         bg: string;
     };
+    withShadow: {
+        boxShadow: string;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    interactive: {
+        borderColor: string;
+    };
+    container: {
+        borderColor: string;
+    };
+    activeCard: {
+        borderColor: string;
+    };
 };
 export default cards;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -8,15 +8,29 @@ exports["default"] = void 0;
 var cards = {
   dark: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
   },
   light: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
+  },
+  withShadow: {
+    boxShadow: 'none',
+    borderColor: 'border.attachment',
+    backgroundColor: 'transparent'
+  },
+  interactive: {
+    borderColor: 'border.attachment'
+  },
+  container: {
+    borderColor: 'border.attachment'
+  },
+  activeCard: {
+    borderColor: 'border.attachment'
   }
 };
 var _default = cards;

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

@@ -19,6 +19,7 @@ export declare const astroBlacklistStory: {
     Avatar: string[];
     Text: string[];
     Loader: string[];
+    Card: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export default nextGenConvertedComponents;

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -26,7 +26,8 @@ var astroBlacklistStory = {
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
-  Loader: ['Circular', 'Custom Circular']
+  Loader: ['Circular', 'Custom Circular'],
+  Card: ['With Shadow']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];

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

@@ -2128,6 +2128,9 @@ declare const _default: {
         heading: string;
         codeView: string;
     };
+    shadows: {
+        standard: string;
+    };
     sizes: {
         avatar: {
             sm: string;
@@ -3544,7 +3547,7 @@ declare const _default: {
         container: {
             p: string;
             borderColor: string;
-            lineHeight: number;
+            lineHeight: string;
             boxShadow: string;
             border: string;
             borderRadius: string;
@@ -3595,7 +3598,7 @@ declare const _default: {
         tableWrapper: {
             p: string;
             borderColor: string;
-            lineHeight: number;
+            lineHeight: string;
             boxShadow: string;
             border: string;
             borderRadius: string;
@@ -3605,6 +3608,23 @@ declare const _default: {
             fontWeight: number;
             flex: string;
         };
+        withShadow: {
+            boxShadow: string;
+            backgroundColor: string;
+            p: string;
+            borderColor: string;
+            lineHeight: string;
+            border: string;
+            borderRadius: string;
+            display: string;
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            flex: string;
+        };
+        flat: {
+            boxShadow: string;
+        };
     };
     variants: {
         accordion: {

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

@@ -55,6 +55,9 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
+  shadows: {
+    standard: '0 1px 3px 0 rgba(0, 0, 0, 0.13)'
+  },
   sizes: _sizes["default"],
   badges: _badges.badges,
   navigationHeader: _navigationHeader["default"],

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

@@ -65,7 +65,7 @@ declare const _default: {
     container: {
         p: string;
         borderColor: string;
-        lineHeight: number;
+        lineHeight: string;
         boxShadow: string;
         border: string;
         borderRadius: string;
@@ -116,7 +116,7 @@ declare const _default: {
     tableWrapper: {
         p: string;
         borderColor: string;
-        lineHeight: number;
+        lineHeight: string;
         boxShadow: string;
         border: string;
         borderRadius: string;
@@ -126,5 +126,22 @@ declare const _default: {
         fontWeight: number;
         flex: string;
     };
+    withShadow: {
+        boxShadow: string;
+        backgroundColor: string;
+        p: string;
+        borderColor: string;
+        lineHeight: string;
+        border: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
+    flat: {
+        boxShadow: string;
+    };
 };
 export default _default;

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

@@ -22,7 +22,7 @@ var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -38,8 +38,13 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   p: 'lg',
-  borderColor: 'border.base',
-  lineHeight: 1.6
+  borderColor: 'gray-200',
+  lineHeight: 'body',
+  boxShadow: 'none'
+});
+var withShadow = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard',
+  backgroundColor: 'backgroundBase'
 });
 var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   border: 'none',
@@ -54,7 +59,7 @@ var light = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'
@@ -93,6 +98,10 @@ var _default = {
   container: container,
   suggestionColumn: suggestionColumn,
   suggestionRow: suggestionRow,
-  tableWrapper: tableWrapper
+  tableWrapper: tableWrapper,
+  withShadow: withShadow,
+  flat: {
+    boxShadow: 'none'
+  }
 };
 exports["default"] = _default;

package/lib/components/Card/Card.mdx

@@ -29,4 +29,8 @@ These keys provide additional functionality to the Interactive Card components.
 | Keys | Functions |
 | ---- | --------- |
 | Space or Enter | Selects the button. |
-| Tab | Focuses the button and follows the page tab sequence.|
+| Tab | Focuses the button and follows the page tab sequence.|
+
+### Note
+
+Use variant "cards.withShadow" to apply box-shadow on Card component.

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

@@ -191,4 +191,12 @@ export var RadioGroupCard = function RadioGroupCard(args) {
     },
     isInteractiveWithin: false
   }), "Active Card");
+};
+export var WithShadow = function WithShadow(args) {
+  return ___EmotionJSX(Box, {
+    bg: "backgroundSecondary",
+    p: "40px"
+  }, ___EmotionJSX(Card, _extends({}, args, {
+    variant: "cards.withShadow"
+  })));
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -1,15 +1,29 @@
 var cards = {
   dark: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
   },
   light: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
+  },
+  withShadow: {
+    boxShadow: 'none',
+    borderColor: 'border.attachment',
+    backgroundColor: 'transparent'
+  },
+  interactive: {
+    borderColor: 'border.attachment'
+  },
+  container: {
+    borderColor: 'border.attachment'
+  },
+  activeCard: {
+    borderColor: 'border.attachment'
   }
 };
 export default cards;

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -18,7 +18,8 @@ export var astroBlacklistStory = {
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
-  Loader: ['Circular', 'Custom Circular']
+  Loader: ['Circular', 'Custom Circular'],
+  Card: ['With Shadow']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -48,6 +48,9 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
+  shadows: {
+    standard: '0 1px 3px 0 rgba(0, 0, 0, 0.13)'
+  },
   sizes: sizes,
   badges: badges,
   navigationHeader: navigationHeader,

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

@@ -14,7 +14,7 @@ var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -30,8 +30,13 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, flat), {}, {
   p: 'lg',
-  borderColor: 'border.base',
-  lineHeight: 1.6
+  borderColor: 'gray-200',
+  lineHeight: 'body',
+  boxShadow: 'none'
+});
+var withShadow = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard',
+  backgroundColor: 'backgroundBase'
 });
 var dark = _objectSpread(_objectSpread({}, flat), {}, {
   border: 'none',
@@ -46,7 +51,7 @@ var light = _objectSpread(_objectSpread({}, flat), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'
@@ -85,5 +90,9 @@ export default {
   container: container,
   suggestionColumn: suggestionColumn,
   suggestionRow: suggestionRow,
-  tableWrapper: tableWrapper
+  tableWrapper: tableWrapper,
+  withShadow: withShadow,
+  flat: {
+    boxShadow: 'none'
+  }
 };

package/package.json

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