@pingux/astro 2.84.0-alpha.1 → 2.84.0-alpha.10

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

@@ -204,7 +204,10 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0
+      pl: 0,
+      '&.is-focused': {
+        color: 'text.primary'
+      }
     }
   }
 };
@@ -226,40 +229,59 @@ var menuItem = {
       color: 'text.primary',
       bg: 'lightblue'
     }
+  },
+  separator: {
+    my: 'sm'
   }
 };
 var separator = {
   base: {
-    bg: 'gray-200'
+    bg: 'gray-300'
   }
 };
-var avatarBase = {
+var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
   borderRadius: '50%',
   textAlign: 'center',
+  alignItems: 'center',
   justifyContent: 'center',
   fontFamily: 'standard'
 };
-var avatar = {
-  xl: _objectSpread({
-    size: '104px',
-    fontSize: 'calc(104px * .4)'
-  }, avatarBase),
-  lg: _objectSpread(_objectSpread({
-    size: '72px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(72px * .4)'
-  }),
-  md: _objectSpread(_objectSpread({
-    size: '34px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(34px * .4)'
-  }),
-  sm: _objectSpread(_objectSpread({
-    size: '24px'
-  }, avatarBase), {}, {
-    fontSize: 'calc(24px * .4)'
-  })
-};
 var progressBarContainer = {
   backgroundColor: 'gray-200',
   borderRadius: '.5rem',
@@ -273,8 +295,12 @@ var progressBar = {
   })
 };
 var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
   iconContainer: {
-    mr: 'sm'
+    ml: '0px'
   },
   styledListItem: {
     bg: 'white',
@@ -295,8 +321,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1.25rem',
-    px: '1rem',
+    py: 'md',
+    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -418,8 +444,17 @@ var listView = {
     borderRadius: '16px',
     border: '1px solid',
     borderColor: '#e7eef4',
-    '& > div': {
-      borderRadius: '16px'
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
     }
   }
 };
@@ -450,6 +485,29 @@ var dataTable = {
     fontSize: 'md'
   }
 };
+var codeView = {
+  wrapper: {
+    backgroundColor: 'gray-900',
+    borderRadius: '4px',
+    '> button >svg': {
+      color: 'gray-300',
+      path: {
+        fill: 'gray-300'
+      }
+    },
+    '> pre': {
+      p: 'md'
+    }
+  }
+};
+var tabs = {
+  gap: '0px'
+};
+var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'gray-300'
+};
 export default {
   navBar: navBar,
   fieldHelperText: fieldHelperText,
@@ -464,5 +522,8 @@ export default {
   listViewItem: listViewItem,
   progressBar: progressBar,
   listView: listView,
-  dataTable: dataTable
+  dataTable: dataTable,
+  codeView: codeView,
+  tabs: tabs,
+  menu: menu
 };

package/lib/styles/variants/variants.js

@@ -34,6 +34,7 @@ import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
 import loader from '../../components/Loader/Loader.styles';
 import menu from '../../components/Menu/Menu.styles';
 import menuItem from '../../components/MenuItem/MenuItem.styles';
+import menuSection from '../../components/MenuSection/MenuSection.styles';
 import message from '../../components/Messages/Message.styles';
 import modal from '../../components/Modal/Modal.styles';
 import navBar from '../../components/NavBar/NavBar.styles';
@@ -79,6 +80,7 @@ export default _objectSpread({
   loader: loader,
   menu: menu,
   menuItem: menuItem,
+  menuSection: menuSection,
   message: message,
   modal: modal,
   navBar: navBar,

package/lib/types/index.js

@@ -30,6 +30,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './menuSection';
 export * from './messages';
 export * from './Modal';
 export * from './navBar';
@@ -43,6 +44,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './switchField';
 export * from './tab';
 export * from './table';
 export * from './tabs';

package/lib/types/menuSection.js

@@ -0,0 +1 @@
+export {};

package/lib/types/switchField.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("../..");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_.AstroProvider, {
-    themeOverrides: [_.NextGenTheme]
-  }, (0, _react2.jsx)(_.Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, (0, _react2.jsx)(_.Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), (0, _react2.jsx)(_.Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};
-exports.Default = Default;

package/lib/recipes/NextGen/DefaultAvatar.stories.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { AstroProvider, Box, NextGenTheme } from '../..';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Next Gen Recipes/Default Avatar'
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenTheme]
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "md",
-    alignItems: "center"
-  }, ___EmotionJSX(Box, {
-    variant: "avatar.sm",
-    backgroundColor: "green-100",
-    color: "green-800"
-  }, "AT"), ___EmotionJSX(Box, {
-    variant: "avatar.md",
-    backgroundColor: "blue-100",
-    color: "blue-800"
-  }, "LP"), ___EmotionJSX(Box, {
-    variant: "avatar.lg",
-    backgroundColor: "teal-100",
-    color: "teal-800"
-  }, "WP"), ___EmotionJSX(Box, {
-    variant: "avatar.xl",
-    backgroundColor: "red-100",
-    color: "red-800"
-  }, "JS")));
-};