@pingux/astro 2.16.1-alpha.1 → 2.17.0-alpha.0

package/lib/recipes/ListAndPanel.stories.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { Item } from 'react-stately';
@@ -8,92 +9,20 @@ import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import PencilIcon from '@pingux/mdi-react/PencilIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
-import { useOverlayPanelState } from '../hooks';
-import useOverlappingMenuHoverState from '../hooks/useOverlappingMenuHoverState';
-import { Box, Icon, IconButton, Link, ListItem, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { useOverlappingMenuHoverState, useOverlayPanelState } from '../hooks';
+import { Box, Icon, IconButton, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { items } from './items';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/List with Panel'
+  title: 'Recipes/List And Panel',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
-var items = [{
-  email: 'dburkitt5@columbia.edu',
-  firstName: 'Nicola',
-  lastName: 'Burkitt',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'idixie2@elegantthemes.com',
-  firstName: 'Cacilia',
-  lastName: 'Dixie',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'dfowler0@rambler.ru',
-  firstName: 'Stavro',
-  lastName: 'Fowler',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'jgolde8@jimdo.com',
-  firstName: 'Celisse',
-  lastName: 'Golde',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'shearst9@answers.com',
-  firstName: 'Jeth',
-  lastName: 'Hearst',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'ajinaa@mapquest.com',
-  firstName: 'Kaycee',
-  lastName: 'Jina',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'vmalster4@biblegateway.com',
-  firstName: 'Lorry',
-  lastName: 'Malster',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'yphipp6@yellowpages.com',
-  firstName: 'Stanley',
-  lastName: 'Phipp',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'mskilbeck3@bbc.co.uk',
-  firstName: 'Gradey',
-  lastName: 'Skilbeck',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'dstebbing1@msu.edu',
-  firstName: 'Marnia',
-  lastName: 'Stebbing',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'lsterley7@lulu.com',
-  firstName: 'Joshua',
-  lastName: 'Sterley',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'luttleyb@hugedomains.com',
-  firstName: 'Jarrod',
-  lastName: 'Uttley',
-  hasIcon: true,
-  avatar: AccountIcon
-}, {
-  email: 'lidelc@yelp.com',
-  firstName: 'Andromache',
-  lastName: 'Idel',
-  hasIcon: true,
-  avatar: AccountIcon
-}];
 var sx = {
   wrapper: {
     px: 'lg',
@@ -102,16 +31,6 @@ var sx = {
     height: '900px',
     overflowY: 'scroll'
   },
-  searchField: {
-    position: 'fixed',
-    mb: 'sm',
-    width: '400px'
-  },
-  listElementWrapper: {
-    px: 'md',
-    bg: 'accent.99',
-    justifyContent: 'center'
-  },
   separator: {
     bg: 'accent.90'
   },
@@ -133,120 +52,83 @@ var sx = {
   itemValue: {
     fontWeight: 0,
     lineHeight: '18px',
-    variant: 'base',
     mb: 'md'
   },
-  listElement: {
-    wrapper: {
-      minHeight: '60px',
-      pl: '14px'
-    },
-    iconWrapper: {
-      mr: 'auto',
-      alignItems: 'center'
+  panelHeader: {
+    container: {
+      bg: 'accent.99',
+      minHeight: 58,
+      ml: 0,
+      pl: 14,
+      pr: 'xs'
     },
-    icon: {
-      mr: 'md',
+    controls: {
       alignSelf: 'center',
-      color: 'accent.40'
-    },
-    avatar: {
-      width: '25px',
-      height: '25px',
-      mr: '14px'
+      ml: 'auto',
+      pr: 'sm'
     },
-    title: {
-      alignSelf: 'start',
-      fontSize: 'md'
+    data: {
+      alignItems: 'center'
     },
     subtitle: {
+      alignSelf: 'start',
       fontSize: 'sm',
-      my: '1px',
       lineHeight: '16px',
-      alignSelf: 'start'
+      my: '1px'
     },
-    menuWrapper: {
-      alignSelf: 'center',
-      pr: '4px'
-    }
-  }
-};
-var ListElement = function ListElement(_ref) {
-  var item = _ref.item,
-    isHoverable = _ref.isHoverable,
-    onClosePanel = _ref.onClosePanel;
-  var listItemRef = useRef();
-  var _useOverlappingMenuHo = useOverlappingMenuHoverState({
-      listItemRef: listItemRef
-    }),
-    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
-    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
-    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
-    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
-    isHovered = _useOverlappingMenuHo.isHovered;
-  return ___EmotionJSX(ListItem, {
-    isHovered: isHoverable && isHovered,
-    isRow: true,
-    onHoverEnd: handleHoverEnd,
-    onHoverStart: handleHoverStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef,
-    sx: sx.listElement.wrapper
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.listElement.iconWrapper
-  }, ___EmotionJSX(Icon, {
-    icon: item.avatar,
-    size: "md",
-    sx: sx.listElement.icon,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    sx: sx.listElement.title
-  }, item.lastName, ",", ' ', item.firstName), ___EmotionJSX(Text, {
-    variant: "subtitle",
-    sx: sx.listElement.subtitle
-  }, item.email))), ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.listElement.menuWrapper
-  }, ___EmotionJSX(SwitchField, {
-    "aria-label": "active user",
-    isDefaultSelected: true,
-    alignSelf: "center",
-    mr: "sm"
-  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
-    "aria-label": "more icon button",
-    mr: onClosePanel ? 'sm' : 0
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "md",
     title: {
-      name: 'More Vertical Icon'
-    }
-  })), ___EmotionJSX(Menu, {
-    onAction: handleHoverEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoverStart
-  }, ___EmotionJSX(Item, {
-    key: "enable"
-  }, "Enable user"), ___EmotionJSX(Item, {
-    key: "disable"
-  }, "Disable user"), ___EmotionJSX(Item, {
-    key: "delete"
-  }, "Delete user"))), onClosePanel && ___EmotionJSX(IconButton, {
-    "aria-label": "close icon button",
-    onPress: onClosePanel
-  }, ___EmotionJSX(Icon, {
-    size: "sm",
-    icon: CloseIcon,
-    title: {
-      name: 'Close Icon'
+      alignSelf: 'start',
+      fontSize: 'md'
+    },
+    wrapper: {
+      cursor: 'pointer',
+      display: 'flex',
+      flex: '1 1 0px',
+      ml: 'md'
     }
-  }))));
+  }
 };
-export var Default = function Default() {
+var heading = 'Users';
+var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  align: "center",
+  isRow: true,
+  mb: "xs",
+  role: "heading",
+  "aria-level": "1"
+}, ___EmotionJSX(Text, {
+  fontSize: "xx",
+  fontWeight: 3,
+  fontColor: "text.primary"
+}, heading), ___EmotionJSX(IconButton, {
+  "aria-label": "icon button",
+  ml: "sm",
+  variant: "inverted"
+}, ___EmotionJSX(Icon, {
+  icon: PlusIcon,
+  size: "sm"
+}))), ___EmotionJSX(Text, {
+  fontSize: "sm",
+  color: "text.secondary",
+  fontWeight: 0,
+  width: "800px"
+}, description, ___EmotionJSX(Link, {
+  href: "https://uilibrary.ping-eng.com/",
+  sx: {
+    fontSize: '13px'
+  }
+}, " Learn more")));
+export var ListAndPanel = function ListAndPanel() {
+  // Example of items data structure
+  // const items = [
+  //   {
+  //     email: 'dburkitt5@columbia.edu',
+  //     firstName: 'Nicola',
+  //     lastName: 'Burkitt',
+  //     icon: AccountIcon,
+  //   },
+  // ]
+
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItemId = _useState2[0],
@@ -259,8 +141,6 @@ export var Default = function Default() {
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = useRef();
-  var heading = 'Users';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
@@ -277,37 +157,6 @@ export var Default = function Default() {
       closePanelHandler();
     }
   };
-  var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, ___EmotionJSX(Text, {
-    fontSize: "xx",
-    fontWeight: 3,
-    fontColor: "text.primary"
-  }, heading), ___EmotionJSX(IconButton, {
-    "aria-label": "icon button",
-    ml: "sm",
-    variant: "inverted"
-  }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
-    size: "sm",
-    title: {
-      name: 'Plus Icon'
-    }
-  }))), ___EmotionJSX(Text, {
-    fontSize: "sm",
-    color: "text.secondary",
-    fontWeight: 0,
-    width: "800px"
-  }, description, ___EmotionJSX(Link, {
-    href: "https://uilibrary.ping-eng.com/",
-    sx: {
-      fontSize: '13px'
-    }
-  }, " Learn more")));
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
   }, title, ___EmotionJSX(SearchField, {
@@ -323,20 +172,17 @@ export var Default = function Default() {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys,
-    isHoverable: false
+    selectedKeys: selectedKeys
   }, function (item) {
+    var _context;
     return ___EmotionJSX(Item, {
-      key: item.email,
-      textValue: item.email,
-      hasSeparator: item.hasSeparator,
-      listItemProps: {
-        minHeight: 75,
-        padding: 1
-      }
+      key: item.email
     }, ___EmotionJSX(ListElement, {
-      isHoverable: true,
-      item: item
+      data: {
+        text: _concatInstanceProperty(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
+        subtext: item.email,
+        icon: item.icon
+      }
     }));
   }), ___EmotionJSX(OverlayPanel, {
     isOpen: panelState.isOpen,
@@ -348,12 +194,10 @@ export var Default = function Default() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, ___EmotionJSX(Box, {
-    sx: sx.listElementWrapper
-  }, ___EmotionJSX(ListElement, {
+  }, ___EmotionJSX(PanelHeader, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), ___EmotionJSX(Separator, {
+  }), ___EmotionJSX(Separator, {
     margin: 0,
     sx: sx.separator
   }), ___EmotionJSX(Box, {
@@ -373,35 +217,117 @@ export var Default = function Default() {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
-  }, ___EmotionJSX(PencilIcon, {
-    size: 20
+  }, ___EmotionJSX(Icon, {
+    icon: PencilIcon,
+    size: "sm"
   })), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemLabel
   }, "Full Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: sx.itemValue
   }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemLabel
   }, "First Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: sx.itemValue
   }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemLabel
   }, "Last Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: sx.itemValue
   }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: sx.itemLabel
   }, "Email"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: sx.itemValue
   }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
     title: "Account Info"
   }, ___EmotionJSX(Text, null, "Account Info")))))));
+};
+export var ListElement = function ListElement(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? {
+      subtext: 'dburkitt5@columbia.edu',
+      text: 'Burkitt, Nicola',
+      icon: AccountIcon
+    } : _ref$data;
+  var listItemRef = useRef();
+  var _useOverlappingMenuHo = useOverlappingMenuHoverState({
+      listItemRef: listItemRef
+    }),
+    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+    isHovered = _useOverlappingMenuHo.isHovered;
+  return ___EmotionJSX(ListViewItem, {
+    data: data,
+    isHovered: isHovered,
+    onHoverEnd: handleHoverEnd,
+    onHoverStart: handleHoverStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef
+  }, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, {
+    onAction: handleHoverEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoverStart
+  }, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")));
+};
+export var PanelHeader = function PanelHeader(_ref2) {
+  var _context2;
+  var _ref2$item = _ref2.item,
+    item = _ref2$item === void 0 ? {
+      email: 'dburkitt5@columbia.edu',
+      icon: AccountIcon,
+      firstName: 'John',
+      lastName: 'Doe'
+    } : _ref2$item,
+    onClosePanel = _ref2.onClosePanel;
+  var email = item.email,
+    firstName = item.firstName,
+    lastName = item.lastName;
+  var text = _concatInstanceProperty(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
+  return ___EmotionJSX(Box, {
+    sx: sx.panelHeader.container
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.wrapper
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.data
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: sx.panelHeader.title
+  }, text), ___EmotionJSX(Text, {
+    variant: "subtitle",
+    sx: sx.panelHeader.subtitle
+  }, email))), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.controls
+  }, ___EmotionJSX(SwitchField, {
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "xs"
+  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "more"
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "md"
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))), ___EmotionJSX(IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, ___EmotionJSX(Icon, {
+    size: "md",
+    icon: CloseIcon
+  })))));
 };

package/lib/recipes/MaskedValue.stories.js

@@ -5,6 +5,7 @@ import EyeOffIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
 import EyeIcon from '@pingux/mdi-react/EyeOutlineIcon';
 import { useStatusClasses } from '../hooks';
 import { Box, Icon, IconButton, Text } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Masked Values',
@@ -83,4 +84,10 @@ export var Default = function Default(_ref) {
       name: isMasked ? 'Eye Off Icon' : 'Eye Icon'
     }
   }))));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.maskedValue["default"]
+  }
 };

package/lib/{experimental/recipes → recipes}/ScrollableListView.stories.js

@@ -4,10 +4,10 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import { Box, ListView, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ScrollBox, SearchField } from '../../index';
+import { Box, ListView, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ScrollBox, SearchField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/recipes/ScrollableListView'
+  title: 'Recipes/Scrollable List View'
 };
 export var ScrollableListView = function ScrollableListView() {
   var unfilteredItems = [{

package/lib/utils/designUtils/figmaLinks.js

@@ -57,6 +57,9 @@ export var FIGMA_LINKS = {
   loader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=13675-33113&t=8Wwd3tIBh3GEjCJB-0'
   },
+  maskedValue: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=10328%3A31859&mode=dev'
+  },
   menu: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },

package/package.json

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