@pingux/astro 2.30.0 → 2.31.0-alpha.0

package/lib/components/TreeView/TreeViewSection.js

@@ -13,7 +13,10 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var item = props.item,
     items = props.items,
-    title = props.title;
+    title = props.title,
+    level = props.level,
+    position = props.position,
+    setSize = props.setSize;
   var key = item.key;
   var treeSectionRef = useRef();
   /* istanbul ignore next */
@@ -38,7 +41,10 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     },
     "aria-expanded": isExpanded,
-    "aria-disabled": isDisabled
+    "aria-disabled": isDisabled,
+    "aria-level": level,
+    "aria-setsize": setSize,
+    "aria-posinset": position + 1
   }, optionProps, {
     role: "treeitem",
     "aria-selected": isSelected
@@ -56,17 +62,23 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       pl: 'md'
     }
-  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item) {
+  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item, _index) {
     var _item$value$items;
     return SectionOrItemRender(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, ___EmotionJSX(TreeViewSection, {
       item: _item,
       items: _item.children,
       title: _item.value.title,
-      key: _item.value.title
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
     }), ___EmotionJSX(TreeViewItem, {
       item: _item,
       title: _item.value.title,
-      key: _item.value.title
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
     }));
   })));
 });
@@ -75,6 +87,9 @@ TreeViewSection.propTypes = {
   item: PropTypes.shape({
     key: PropTypes.string
   }),
-  title: PropTypes.string
+  title: PropTypes.string,
+  level: PropTypes.number,
+  position: PropTypes.number,
+  setSize: PropTypes.number
 };
 export default TreeViewSection;

package/lib/index.js

@@ -69,6 +69,7 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
+export { NoticeIcon } from './components/Icon/NoticeIcon';
 export { default as IconBadge } from './components/IconBadge';
 export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';

package/lib/recipes/PanelContent.stories.js

@@ -0,0 +1,477 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useRef } from 'react';
+import { Item } from 'react-stately';
+import PencilIcon from '@pingux/mdi-react/PencilIcon';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
+import { useOverlayPanelState } from '../hooks';
+import { AccordionGroup, Badge, Box, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
+import UserImage from '../utils/devUtils/assets/UserImage.png';
+import statuses from '../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/PanelContent',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+var data = {
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      isVerified: true
+    }, {
+      label: 'Primary',
+      value: '+1 767-777-3333'
+    }, {
+      label: 'Address',
+      value: '1234 W California St, Denver CO 80101'
+    }]
+  },
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: UserImage,
+    fields: [{
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Famile Name',
+      value: 'Nepomuceno'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Tile',
+      value: 'Interaction Designer'
+    }]
+  },
+  customAttributes: {
+    label: 'Custom Attributes',
+    key: 'customAttributesKey',
+    fields: [{
+      label: 'T-Shirt Size',
+      value: 'Large'
+    }, {
+      label: 'Example Multi-Value Attribute',
+      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
+    }]
+  },
+  jsonAttributes: {
+    label: 'JSON Attributes',
+    key: 'jsonAttributesKey',
+    badges: ['Address', 'Contact', 'Another Json'],
+    fields: []
+  }
+};
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var children = _ref.children;
+  var _useOverlayPanelState = useOverlayPanelState({
+      isDefaultOpen: true
+    }),
+    state = _useOverlayPanelState.state;
+  var triggerRef = useRef();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), ___EmotionJSX(OverlayPanel, {
+    isOpen: state.isOpen,
+    isTransitioning: state.isTransitioning,
+    size: "large",
+    p: "0"
+  }, ___EmotionJSX(PanelHeader, {
+    data: {
+      image: {
+        src: UserImage,
+        alt: 'user image'
+      },
+      text: data.personalInfo.fields[0].value,
+      subtext: data.personalInfo.fields[1].value
+    }
+  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null), ___EmotionJSX(PanelHeaderCloseButton, {
+    onPress: state.close
+  })), children));
+};
+export var DisplayPanel = function DisplayPanel() {
+  var _context, _context2;
+  var renderProfileTab = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "20px"
+  }, _mapInstanceProperty(colorBlockButtons).call(colorBlockButtons, function (tileData) {
+    return ___EmotionJSX(ColorBlockButton, {
+      buttonData: tileData,
+      key: "".concat(tileData.text, "-key")
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: _mapInstanceProperty(_context = _Object$keys(data)).call(_context, function (item) {
+      return data[item].key;
+    }),
+    labelHeadingTag: "h2"
+  }, _mapInstanceProperty(_context2 = _Object$keys(data)).call(_context2, function (item) {
+    var _context3;
+    return ___EmotionJSX(Item, {
+      "data-id": data[item].label,
+      key: data[item].key,
+      label: data[item].label,
+      textValue: data[item].label
+    }, data[item].image ? ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md"
+    }, ___EmotionJSX(Image, {
+      src: UserImage,
+      alt: "user"
+    }), ___EmotionJSX(LabelValuePairs, {
+      fields: data[item].fields
+    })) : ___EmotionJSX(LabelValuePairs, {
+      fields: data[item].fields
+    }), data[item].badges && ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "sm"
+    }, _mapInstanceProperty(_context3 = data[item].badges).call(_context3, function (badge) {
+      return ___EmotionJSX(Badge, {
+        label: badge,
+        variant: "defaultBadge",
+        key: "".concat(badge, "-key")
+      });
+    })));
+  })), ___EmotionJSX(EditButton, {
+    size: "lg"
+  })));
+  var tabs = [{
+    name: 'Profile',
+    children: renderProfileTab
+  }, {
+    name: 'Groups',
+    children: 'Groups'
+  }, {
+    name: 'Roles',
+    children: 'Roles'
+  }, {
+    name: 'Services',
+    list: [{
+      key: 'service1',
+      name: 'Service 1',
+      children: 'Service 1',
+      role: 'listitem'
+    }, {
+      key: 'service2',
+      name: 'Service 2',
+      children: 'Service 2',
+      role: 'listitem'
+    }]
+  }, {
+    name: 'API',
+    children: 'API'
+  }];
+  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+    p: "lg",
+    pt: "xs"
+  }, ___EmotionJSX(Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Tab, _extends({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  })));
+};
+DisplayPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelContent.displayPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var ColorBlockButton = function ColorBlockButton(_ref2) {
+  var _ref2$buttonData = _ref2.buttonData,
+    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
+  return ___EmotionJSX(Button, {
+    variant: "colorBlock",
+    className: buttonData.isConfigured ? 'is-configured' : ''
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, buttonData.text), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, buttonData.subtext)), ___EmotionJSX(Icon, {
+    icon: PencilIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  }));
+};
+export var LabelValuePairs = function LabelValuePairs(_ref3) {
+  var _ref3$fields = _ref3.fields,
+    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    maxWidth: "675px"
+  }, _mapInstanceProperty(fields).call(fields, function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      isVerified = _ref4.isVerified;
+    return ___EmotionJSX(Box, {
+      gap: "xs",
+      key: "".concat(label, "-key")
+    }, ___EmotionJSX(Text, {
+      variant: "h4"
+    }, label), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md"
+    }, ___EmotionJSX(Text, null, value), isVerified && ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "xs"
+    }, ___EmotionJSX(NoticeIcon, {
+      color: "success.dark",
+      status: statuses.SUCCESS,
+      "aria-label": "".concat(statuses.SUCCESS, "-icon"),
+      size: "xs"
+    }), ___EmotionJSX(Text, {
+      variant: "listSubtitle",
+      color: "success.dark"
+    }, "Verified"))));
+  }));
+};
+var editData = {
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: UserImage,
+    fields: [{
+      label: 'Prefix',
+      value: ''
+    }, {
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Middle Name',
+      value: ''
+    }, {
+      label: 'Family Name',
+      value: 'Nepomuceno'
+    }, {
+      label: 'Suffix',
+      value: ''
+    }, {
+      label: 'Formatted',
+      value: ''
+    }, {
+      label: 'Nickname',
+      value: ''
+    }]
+  },
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      slot: ___EmotionJSX(CheckboxField, {
+        mt: "xs",
+        label: "Require Email to be Verified"
+      })
+    }, {
+      label: 'Phone Number',
+      value: '123-456-7890'
+    }, {
+      label: 'Street Address',
+      value: '123 Example St'
+    }, {
+      label: 'Country Code',
+      value: ''
+    }, {
+      label: 'Loality',
+      value: ''
+    }, {
+      label: 'Region',
+      value: ''
+    }, {
+      label: 'Zip Code',
+      value: '12345'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Account ID',
+      value: ''
+    }, {
+      label: 'Type',
+      value: ''
+    }, {
+      label: 'Title',
+      value: ''
+    }]
+  }
+};
+export var EditPanel = function EditPanel() {
+  var _context4, _context5, _context6;
+  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+    p: "lg",
+    pb: "0"
+  }, ___EmotionJSX(Box, {
+    gap: "md",
+    mb: "20px",
+    width: "500px"
+  }, ___EmotionJSX(TextField, {
+    defaultValue: "ednepomuceno",
+    isRequired: true,
+    label: "Username"
+  }), ___EmotionJSX(SelectField, {
+    label: "Population",
+    isRequired: true,
+    defaultSelectedKey: "population"
+  }, ___EmotionJSX(Item, {
+    key: "population"
+  }, "Denver"))), ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: _concatInstanceProperty(_context4 = []).call(_context4, _mapInstanceProperty(_context5 = _Object$keys(editData)).call(_context5, function (item) {
+      return editData[item].key;
+    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
+    labelHeadingTag: "h2"
+  }, _mapInstanceProperty(_context6 = _Object$keys(editData)).call(_context6, function (item) {
+    var _context7;
+    return ___EmotionJSX(Item, {
+      "data-id": editData[item].label,
+      key: editData[item].key,
+      label: editData[item].label,
+      textValue: editData[item].label
+    }, ___EmotionJSX(Box, {
+      gap: "md",
+      width: "500px"
+    }, editData[item].image && ___EmotionJSX(ImageUploadField, {
+      label: "Photo",
+      previewHeight: 40,
+      previewWidth: 40,
+      previewImage: UserImage
+    }), _mapInstanceProperty(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+      var label = _ref5.label,
+        value = _ref5.value,
+        slot = _ref5.slot;
+      return ___EmotionJSX(Box, {
+        key: "".concat(label, "-key")
+      }, ___EmotionJSX(TextField, {
+        label: label,
+        defaultValue: value
+      }), slot);
+    })));
+  }), ___EmotionJSX(Item, {
+    "data-id": "preferences",
+    key: "preferencesKey",
+    label: "Preferences",
+    textValue: "Preferences"
+  }, ___EmotionJSX(Box, {
+    gap: "md",
+    width: "500px"
+  }, ___EmotionJSX(SelectField, {
+    label: "Preferred Language",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a Language")), ___EmotionJSX(SelectField, {
+    label: "Locale",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a locale")), ___EmotionJSX(SelectField, {
+    label: "Timezone",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a timezone")))), ___EmotionJSX(Item, {
+    "data-id": "customAttributes",
+    key: "customAttributesKey",
+    label: "Custom Attributes",
+    textValue: "Custom Attributes"
+  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a custom attribute")), ___EmotionJSX(Item, {
+    "data-id": "jsonAttributes",
+    key: "jsonAttributesKey",
+    label: "JSON Attributes",
+    textValue: "JSON Attributes"
+  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a JSON attribute")))), ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "link"
+  }, "Cancel")));
+};
+EditPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelContent.editPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var AddAttributeButton = function AddAttributeButton() {
+  return ___EmotionJSX(Box, {
+    sx: {
+      position: 'relative',
+      left: '700px',
+      top: '-35px',
+      width: 0,
+      height: 0
+    }
+  }, ___EmotionJSX(Button, {
+    variant: "inlineWithIcon"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    size: "xs"
+  }), "Add"));
+};

package/lib/utils/designUtils/figmaLinks.js

@@ -101,6 +101,10 @@ export var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelContent: {
+    displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
+    editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
+  },
   panelHeader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
     withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',

package/package.json

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