@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/styles/variants/text.js

@@ -0,0 +1,349 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var base = {
+  display: 'block',
+  fontSize: 'md',
+  color: 'text.primary',
+  fontFamily: 'standard',
+  overflowWrap: 'break-word'
+};
+var wordWrap = {
+  display: 'block',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word'
+};
+
+var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 1,
+  mb: 'sm',
+  lineHeight: '16px',
+  color: 'neutral.40',
+  height: '100%',
+  '.is-selected &, .is-hovered &': {
+    color: 'active'
+  },
+  '.is-selected &': {
+    color: 'active',
+    mb: 8
+  },
+  '.is-disabled &': {
+    color: 'neutral.80'
+  }
+});
+
+var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+  fontSize: 'sm',
+  '&.is-default': {
+    color: 'text.secondary'
+  },
+  '&.is-error': {
+    color: 'critical.dark'
+  },
+  '&.is-success': {
+    color: 'success.dark'
+  },
+  '&.is-warning': {
+    color: 'warning.dark'
+  },
+  '.is-left-label > &': {
+    gridRowEnd: 3,
+    gridColumnEnd: 3
+  }
+});
+
+var tooltipContent = {
+  maxWidth: '10em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
+};
+var expandableRowSharedStyle = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+var expandableRow = {
+  title: _objectSpread({
+    fontSize: 'lg',
+    color: 'neutral.20'
+  }, expandableRowSharedStyle),
+  subtitle: _objectSpread({
+    fontSize: 'sm',
+    color: 'neutral.60'
+  }, expandableRowSharedStyle),
+  lineChart: {
+    title: _objectSpread({
+      fontSize: 'sm',
+      color: 'neutral.40',
+      maxWidth: '100%'
+    }, expandableRowSharedStyle),
+    count: {
+      color: 'neutral.20',
+      fontSize: 22,
+      fontWeight: 2
+    },
+    countLabel: {
+      fontSize: 'xs',
+      color: 'neutral.50'
+    },
+    chartLabel: {
+      fontSize: 'xs',
+      color: 'neutral.50',
+      minWidth: '60px'
+    },
+    trend: {
+      color: 'neutral.20',
+      fontSize: 'sm',
+      fontWeight: 3,
+      whiteSpace: 'nowrap'
+    }
+  }
+};
+var breadcrumbLink = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: '15px',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  },
+  '&.is-current': _objectSpread(_objectSpread({
+    pointerEvents: 'none'
+  }, base), {}, {
+    fontWeight: 1
+  })
+};
+
+var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: 'sm',
+  fontWeight: 3,
+  color: 'secondary',
+  textTransform: 'capitalize'
+});
+
+var navBarSubtitle = {
+  ml: 'md',
+  mb: '15px',
+  fontWeight: 3,
+  fontSize: '11px',
+  color: 'accent.80',
+  zIndex: '100'
+};
+
+var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: '13px',
+  fontSize: '13px',
+  fontWeight: 1,
+  maxWidth: '150px'
+});
+
+var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'neutral.30',
+  fontSize: 'sm',
+  fontWeight: 500,
+  overflow: 'hidden',
+  marginRight: 'xs',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var collapsiblePanelTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 500,
+  color: 'text.secondary',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  mr: 'xs'
+});
+
+var maskedValue = {
+  width: 252,
+  wordBreak: 'break-all',
+  '&.is-masked': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    fontWeight: 700
+  }
+};
+var timeZone = {
+  title: {
+    color: 'neutral.10',
+    fontSize: 'md',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  subTitle: {
+    color: 'neutral.40',
+    fontSize: 'sm',
+    ml: 10,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  time: {
+    color: 'neutral.10',
+    fontSize: 'sm',
+    fontWeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  }
+};
+export var text = {
+  base: base,
+  bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontWeight: 1,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
+  bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
+  breadcrumbLink: breadcrumbLink,
+  buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'md',
+    fontWeight: 1,
+    color: 'accent.30',
+    fontFamily: 'standard'
+  }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
+  capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    color: 'text.secondary',
+    textTransform: 'uppercase',
+    fontFamily: 'standard'
+  }),
+  environmentBreadcrumb: environmentBreadcrumb,
+  fieldHelperText: fieldHelperText,
+  inputValue: {
+    fontWeight: 1,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  itemTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'md',
+    fontWeight: 1,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
+  itemSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 0,
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
+  label: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard',
+    fontWeight: 1
+  }),
+  listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'md',
+    fontWeight: 1,
+    color: 'text.primary',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }),
+  listSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 0,
+    color: 'text.secondary',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }),
+  maskedValue: maskedValue,
+  expandableRow: expandableRow,
+  collapsiblePanellItem: collapsiblePanellItem,
+  collapsiblePanelTitle: collapsiblePanelTitle,
+  navBarHeaderText: navBarHeaderText,
+  navBarSubtitle: navBarSubtitle,
+  placeholder: {
+    fontWeight: -1,
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  },
+  sectionTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
+  subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontWeight: 0,
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
+  tabLabel: tabLabel,
+  tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 1,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
+  textEllipsis: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  title: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xx',
+    fontWeight: 1,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
+  tooltipContent: tooltipContent,
+  timeZone: timeZone
+};

package/lib/styles/variants/tooltip.js

@@ -0,0 +1,6 @@
+var tooltipContainer = {
+  p: 'sm'
+};
+export default {
+  tooltipContainer: tooltipContainer
+};

package/lib/styles/variants/variants.js

@@ -0,0 +1,64 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import accordion from './accordion';
+import boxes from './boxes';
+import codeView from './codeView';
+import images from './images';
+import imageUpload from './imageUpload';
+import links from './links';
+import listBox from './listBox';
+import loader from './loader';
+import modal from './modal';
+import menu from './menu';
+import menuItem from './menuItem';
+import messages from './messages';
+import navBar from './navBar';
+import numberField from './numberField';
+import overlayPanel from './overlayPanel';
+import popoverMenu from './popoverMenu';
+import rockerbutton from './rockerbutton';
+import separator from './separator';
+import stepper from './stepper';
+import table from './table';
+import * as tabs from './tabs';
+import tooltip from './tooltip';
+import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
+export default _objectSpread(_objectSpread({
+  accordion: accordion,
+  boxes: boxes,
+  codeView: codeView,
+  images: images,
+  imageUpload: imageUpload,
+  loader: loader,
+  links: links,
+  listBox: listBox,
+  menu: menu,
+  menuItem: menuItem,
+  messages: messages,
+  modal: modal,
+  collapsiblePanel: collapsiblePanel,
+  navBar: navBar,
+  numberField: numberField,
+  overlayPanel: overlayPanel,
+  popoverMenu: popoverMenu,
+  rockerbutton: rockerbutton,
+  separator: separator,
+  stepper: stepper,
+  table: table
+}, tabs), {}, {
+  tooltip: tooltip,
+  dataTable: dataTable
+});

package/lib/templates/Nav/HeaderBar.js

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 { PersonIcon } from './NavData';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var CustomPopoverMenu = function CustomPopoverMenu() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
+    onOpenChange: setIsOpen
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "default icon button"
+  }, ___EmotionJSX(Icon, {
+    icon: MenuDownIcon,
+    size: 15,
+    color: "neutral.30",
+    sx: isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "option1"
+  }, "First Option"), ___EmotionJSX(Item, {
+    key: "option2"
+  }, "Second Option"), ___EmotionJSX(Item, {
+    key: "option3"
+  }, "Third Option"))));
+};
+
+var HeaderBar = function HeaderBar() {
+  var Rectangle = function Rectangle() {
+    return ___EmotionJSX(Box, {
+      width: "1px",
+      height: 30,
+      bg: "neutral.80",
+      mx: 25
+    });
+  };
+
+  return ___EmotionJSX(Box, {
+    ml: 230,
+    px: 15,
+    bg: "white",
+    height: "40px",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, ___EmotionJSX(EnvironmentBreadcrumb, null), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: HelpCircleOutlineIcon,
+    size: 20,
+    color: "neutral.30"
+  }), ___EmotionJSX(CustomPopoverMenu, null)), ___EmotionJSX(Rectangle, null), ___EmotionJSX(Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: ExploreIcon,
+    size: 20
+  }), ___EmotionJSX(Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Explore"), ___EmotionJSX(CustomPopoverMenu, null)), ___EmotionJSX(Rectangle, null), ___EmotionJSX(Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: PersonIcon,
+    size: 20
+  }), ___EmotionJSX(Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Alyssa Chambers"), ___EmotionJSX(CustomPopoverMenu, null))));
+};
+
+export default HeaderBar;

package/lib/templates/Nav/Nav.stories.js

@@ -0,0 +1,88 @@
+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 { logo, data, secondData, thirdData } from './NavData';
+import HeaderBar from './HeaderBar';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Templates/Nav',
+  parameters: {
+    backgrounds: {
+      "default": 'accent',
+      values: [{
+        name: 'accent',
+        value: '#F7F8FD'
+      }]
+    }
+  }
+};
+
+var SideNav = function SideNav(_ref) {
+  var setSelectedKeys = _ref.setSelectedKeys,
+      selectedKeys = _ref.selectedKeys;
+  return ___EmotionJSX(NavBar, {
+    setSelectedKeys: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }, ___EmotionJSX(Box, {
+    padding: "md"
+  }, ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link"
+  }, logo)), ___EmotionJSX(Separator, {
+    marginTop: "lg",
+    marginBottom: "sm"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, ___EmotionJSX(NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: GlobeIcon
+  }), ___EmotionJSX(NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services"
+  }), ___EmotionJSX(NavBarSection, {
+    items: thirdData
+  })));
+};
+
+export var Default = function Default() {
+  var _useState = useState('Overview'),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return ___EmotionJSX(Box, {
+    bg: "accent.99",
+    height: "100vh"
+  }, ___EmotionJSX(SideNav, {
+    setSelectedKeys: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }), ___EmotionJSX(HeaderBar, null), ___EmotionJSX(Box, {
+    ml: 255,
+    mt: 25
+  }, ___EmotionJSX(Text, {
+    as: "h1",
+    variant: "title",
+    sx: {
+      fontWeight: 3
+    }
+  }, selectedKeys)));
+};
+Default.decorators = [function (Story) {
+  return ___EmotionJSX(Box, {
+    sx: {
+      margin: '-50px'
+    }
+  }, ___EmotionJSX(Story, null));
+}];
+Default.parameters = {
+  layout: 'fullscreen'
+};