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

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -2,13 +2,19 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState, useRef } from 'react';
 import { Item } from '@react-stately/collections';
+import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
+import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
+import CloseIcon from 'mdi-react/CloseIcon';
+import CogIcon from 'mdi-react/CogIcon';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import { useOverlayPanelState } from '../../hooks';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button } from '../../index';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, Avatar, IconButton, Breadcrumbs, Tabs, Tab, TextField, MultivaluesField, SwitchField, ColorField } from '../../index';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { pingImg } from '../../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'OverlayPanel',
+  title: 'Components/OverlayPanel',
   component: OverlayPanel,
   argTypes: {
     children: {
@@ -196,4 +202,264 @@ export var CustomWidth = function CustomWidth() {
       pt: "md"
     }, "Children render here."))))
   );
+};
+export var Expandable = function Expandable() {
+  var _useOverlayPanelState5 = useOverlayPanelState(),
+      state = _useOverlayPanelState5.state,
+      onClose = _useOverlayPanelState5.onClose;
+
+  var triggerRef = useRef();
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isExpanded = _useState4[0],
+      setIsExpanded = _useState4[1];
+
+  var sx = {
+    overlayPanel: {
+      padding: 0,
+      transition: 'width 500ms, right 500ms'
+    },
+    header: {
+      height: '110px',
+      bg: '#F7F8FD',
+      infoAndButtonsContainer: {
+        justifyContent: 'space-between',
+        padding: '20px 20px 0 20px'
+      },
+      pingOneAuthorizeContainer: {
+        gap: '18px',
+        alignItems: 'center',
+        width: 'fit-content'
+      },
+      breadcrumbsContainer: {
+        marginLeft: '78px',
+        fontSize: 'md',
+        fontWeight: 500
+      }
+    },
+    contentContainer: {
+      padding: '15px 25px 0 25px'
+    },
+    tabs: {
+      justifyContent: 'center'
+    },
+    tabPanel: {
+      height: 'calc(100vh - 255px)',
+      overflow: 'scroll'
+    },
+    switchField: {
+      rowGap: 'xs',
+      display: 'grid !important',
+      gridTemplateColumns: 'max-content auto',
+      fontSize: 'sm',
+      fontWeight: 500,
+      color: 'text.secondary',
+      '> div': {
+        order: 2
+      }
+    },
+    colorField: {
+      width: '30px',
+      height: '20px'
+    },
+    tabContent: {
+      gap: 'md',
+      width: isExpanded ? '100%' : '400px',
+      transition: 'width 500ms'
+    },
+    footer: {
+      marginTop: 'auto',
+      padding: '15px 25px',
+      button: {
+        width: '65px',
+        height: '38px',
+        border: '0 !important'
+      }
+    }
+  };
+  var multivaluesFieldItems = [{
+    id: 1,
+    name: 'node 1',
+    key: 'node1'
+  }, {
+    id: 2,
+    name: 'node 2',
+    key: 'node2'
+  }];
+
+  var onCloseHandler = function onCloseHandler() {
+    return onClose(state, triggerRef);
+  };
+
+  var header = ___EmotionJSX(Box, {
+    sx: sx.header
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.header.infoAndButtonsContainer
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.header.pingOneAuthorizeContainer
+  }, ___EmotionJSX(Avatar, {
+    src: pingImg,
+    sx: {
+      width: '40px',
+      height: '40px'
+    }
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    fontSize: "md"
+  }, "PingOne Authorize"), ___EmotionJSX(Text, {
+    variant: "subtitle",
+    fontSize: "sm"
+  }, "ID: kcdhaweyf2d"), ___EmotionJSX(Text, {
+    variant: "subtitle",
+    fontSize: "sm"
+  }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "settings-icon",
+    size: 20
+  }, ___EmotionJSX(CogIcon, null)), ___EmotionJSX(IconButton, {
+    "aria-label": "expand-icon",
+    size: 20,
+    onPress: function onPress() {
+      return setIsExpanded(!isExpanded);
+    }
+  }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(IconButton, {
+    "aria-label": "close-icon",
+    size: 20,
+    onPress: onCloseHandler
+  }, ___EmotionJSX(CloseIcon, null)))), ___EmotionJSX(Box, {
+    sx: sx.header.breadcrumbsContainer
+  }, ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    key: "home",
+    "data-id": "home"
+  }, "Capability"), ___EmotionJSX(Item, {
+    key: "editGroups",
+    variant: "neutralText",
+    "data-id": "editGroups"
+  }, "Make Decision Request"))));
+
+  var generalTabContent = ___EmotionJSX(Box, {
+    sx: sx.tabContent
+  }, ___EmotionJSX(TextField, {
+    label: "Node Title",
+    defaultValue: "The Value of the Text Input"
+  }), ___EmotionJSX(TextField, {
+    label: "Node Description",
+    defaultValue: "The Value of the Text Input"
+  }), ___EmotionJSX(ColorField, {
+    value: "#EACE91",
+    label: "Node Background Color",
+    buttonProps: {
+      sx: sx.colorField
+    }
+  }), ___EmotionJSX(SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Authentication Token",
+    value: "expire-authentication-token"
+  }), ___EmotionJSX(SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Flow Instance Cache",
+    value: "expire-flow-instance-cache"
+  }), ___EmotionJSX(MultivaluesField, {
+    items: multivaluesFieldItems,
+    label: "Expire Node Instance Cache List",
+    inputProps: {
+      hintText: 'Example Hint'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+
+  var settingsTabContent = ___EmotionJSX(Box, {
+    sx: sx.tabContent
+  }, ___EmotionJSX(SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Authentication Token",
+    value: "expire-authentication-token"
+  }), ___EmotionJSX(SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Flow Instance Cache",
+    value: "expire-flow-instance-cache"
+  }), ___EmotionJSX(SwitchField, {
+    hintText: "Example Hint",
+    labelProps: {
+      sx: sx.switchField
+    },
+    label: "Expire Node Instance Cache",
+    value: "expire-node-instance-cache"
+  }));
+
+  var schemaTabContent = ___EmotionJSX(Box, {
+    sx: sx.tabContent
+  }, ___EmotionJSX(TextField, {
+    hintText: "Example Hint",
+    label: "Log field Title",
+    defaultValue: "The Value of the Text Input"
+  }), ___EmotionJSX(TextField, {
+    hintText: "Example Hint",
+    label: "Log field Description",
+    defaultValue: "The Value of the Text Input"
+  }));
+
+  var footer = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.footer
+  }, ___EmotionJSX(Button, {
+    onPress: onCloseHandler,
+    sx: sx.footer.button,
+    variant: "primary"
+  }, "Save"), ___EmotionJSX(Button, {
+    onPress: onCloseHandler,
+    sx: sx.footer.button,
+    variant: "text"
+  }, "Cancel"));
+
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      ref: triggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen
+    }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: sx.overlayPanel,
+      size: isExpanded ? 'full' : 'medium'
+    }, header, ___EmotionJSX(Box, {
+      sx: sx.contentContainer
+    }, ___EmotionJSX(Tabs, {
+      tabListProps: sx.tabs,
+      tabPanelProps: sx.tabPanel
+    }, ___EmotionJSX(Tab, {
+      key: "tab1",
+      title: "General"
+    }, generalTabContent), ___EmotionJSX(Tab, {
+      key: "tab2",
+      title: "Settings"
+    }, settingsTabContent), ___EmotionJSX(Tab, {
+      key: "tab3",
+      title: "Schema"
+    }, schemaTabContent))), footer))
+  );
 };

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { OverlayProvider, PopoverMenu, Button, Menu, Item, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'PopoverMenu',
+  title: 'Components/PopoverMenu',
   component: PopoverMenu,
   parameters: {
     docs: {

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import RequirementsList from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'RequirementsList',
+  title: 'Components/RequirementsList',
   component: RequirementsList,
   argTypes: {
     requirements: {

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

@@ -5,7 +5,7 @@ import RockerButtonGroup from '../RockerButtonGroup';
 import RockerButton from '../RockerButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'RockerButtonGroup',
+  title: 'Components/RockerButtonGroup',
   component: RockerButtonGroup,
   parameters: {
     docs: {

package/lib/components/ScrollBox/ScrollBox.stories.js

@@ -4,7 +4,7 @@ import ScrollBox from './ScrollBox';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'ScrollBox',
+  title: 'Components/ScrollBox',
   component: ScrollBox,
   argTypes: {
     maxHeight: {

package/lib/components/Separator/Separator.stories.js

@@ -4,7 +4,7 @@ import Separator from './Separator';
 import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Separator',
+  title: 'Components/Separator',
   component: Separator
 };
 export var Default = function Default(_ref) {

package/lib/components/Stepper/Stepper.stories.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Stepper, Step, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Stepper',
+  title: 'Components/Stepper',
   component: Stepper,
   args: {
     items: undefined,

package/lib/components/Table/Table.stories.js

@@ -10,7 +10,7 @@ import TableCaption from '../TableCaption';
 import { Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Table',
+  title: 'Components/Table',
   component: Table
 };
 var caption = 'Populations of Countries';

package/lib/components/Tabs/Tabs.stories.js

@@ -11,7 +11,7 @@ import Text from '../Text';
 import { Chip } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Tabs',
+  title: 'Components/Tabs',
   component: Tabs,
   argTypes: {
     isDisabled: {},

package/lib/components/Text/Text.stories.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { Box, Separator, Table, TableCell, TableBody, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Text',
+  title: 'Components/Text',
   component: Text,
   argTypes: {
     variant: {

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -6,7 +6,7 @@ import IconButton from '../IconButton';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'TooltipTrigger',
+  title: 'Components/TooltipTrigger',
   component: TooltipTrigger
 };
 export var Default = function Default(args) {

package/lib/context/BadgeContext/index.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var defaultValue = 'inherit';
+export var BadgeContext = /*#__PURE__*/createContext(defaultValue);

package/lib/{styles → docs/design}/ColorDocumentation.stories.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ColorSchema } from './ColorDocumentation';
-import Box from '../components/Box';
+import { ColorSchema } from '../../styles/ColorDocumentation';
+import Box from '../../components/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Color Schema',
+  title: 'Docs/Design/Color Schema',
   component: ColorSchema
 };
 export var Colors = function Colors() {

package/lib/{styles → docs/design}/ContainerSizes.stories.js

@@ -1,9 +1,9 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import { Box, Text } from '../index';
+import { Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Design/Container Sizes'
+  title: 'Docs/Design/Container Sizes'
 };
 var containerArray = [{
   key: 'xs',

package/lib/{styles → docs/design}/Spacing.stories.js

@@ -2,12 +2,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import React from 'react';
-import Text from '../components/Text';
-import scale from './spacing';
-import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '..';
+import Text from '../../components/Text';
+import scale from '../../styles/spacing';
+import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Design/Spacing'
+  title: 'Docs/Design/Spacing'
 };
 var tableBodyStyles = {
   border: 'unset'

package/lib/{styles → docs/design}/Typography.stories.js

@@ -2,12 +2,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import React from 'react';
-import Text from '../components/Text';
-import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '..';
-import { fontWeights, fontSizes } from './text';
+import Text from '../../components/Text';
+import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '../..';
+import { fontWeights, fontSizes } from '../../styles/text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Design/Typography'
+  title: 'Docs/Design/Typography'
 };
 var tableBodyStyles = {
   border: 'unset'

package/lib/{styles → docs/theme}/ThemeDocumentation.js

@@ -1,6 +1,6 @@
 import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
 import React from 'react';
-import theme from './theme';
+import theme from '../../styles/theme';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default (function () {
   return ___EmotionJSX("pre", null, _JSON$stringify(theme, null, '    '));

package/lib/index.js

@@ -15,6 +15,7 @@ export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
+export { default as Badge } from './components/Chip/Badge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';
@@ -136,6 +137,8 @@ export { default as TableHead } from './components/TableHead';
 export * from './components/TableHead';
 export { default as TableRow } from './components/TableRow';
 export * from './components/TableRow';
+export { default as TableCaption } from './components/TableCaption';
+export * from './components/TableCaption';
 export { default as Tabs } from './components/Tabs';
 export * from './components/Tabs';
 export { default as Text } from './components/Text';

package/lib/recipes/ListAndPanel.stories.js

@@ -306,7 +306,8 @@ export var Default = function Default() {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
-    p: 0
+    p: 0,
+    size: "large"
   }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,

package/lib/styles/colors.js

@@ -76,7 +76,7 @@ var getDecorativeColor = function getDecorativeColor(index) {
 };
 
 export var decorative = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(11)).call(_context2, 0)).call(_context, function (_v, index) {
-  return getDecorativeColor(index);
+  return index !== 4 ? getDecorativeColor(index) : '#e30080';
 });
 export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, function (color) {
   return chroma(color).darken(2).hex();

package/lib/{templates → styles/templates}/Nav/HeaderBar.js

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import HelpCircleOutlineIcon from 'mdi-react/HelpCircleOutlineIcon';
 import MenuDownIcon from 'mdi-react/MenuDownIcon';
 import ExploreIcon from 'mdi-react/CompassOutlineIcon';
-import { WithSections as EnvironmentBreadcrumb } from '../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
-import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { WithSections as EnvironmentBreadcrumb } from '../../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
+import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../../index';
 import { PersonIcon } from './NavData';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 

package/lib/{templates → styles/templates}/Nav/Nav.stories.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import GlobeIcon from 'mdi-react/GlobeIcon';
-import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../index';
+import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../../index';
 import { logo, data, secondData, thirdData } from './NavData';
 import HeaderBar from './HeaderBar';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/{templates → styles/templates}/Nav/NavData.js

@@ -7,7 +7,7 @@ import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import Earth from 'mdi-react/EarthIcon';
-import { NavBarItemButton } from '../../components/NavBarSection';
+import { NavBarItemButton } from '../../../components/NavBarSection';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var Credentials = function Credentials(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.38.0-alpha.0",
+  "version": "1.38.0-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",

package/lib/cjs/components/Chip/ChipContext.js

@@ -1,19 +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.ChipContext = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var defaultValue = 'inherit';
-
-var ChipContext = /*#__PURE__*/_react["default"].createContext(defaultValue);
-
-exports.ChipContext = ChipContext;

package/lib/components/Chip/ChipContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-var defaultValue = 'inherit';
-export var ChipContext = /*#__PURE__*/React.createContext(defaultValue);