@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

package/lib/Patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -0,0 +1,138 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { Box, Chip, Separator, Text, TextField } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/Attribute Mapping Display View'
+};
+var fieldValues = [{
+  field1: 'username',
+  field2: 'UserID',
+  hasChip: true,
+  chipLabel: 'Required',
+  key: 1
+}, {
+  field1: 'firstName',
+  field2: 'Given Name',
+  hasChip: false,
+  key: 2
+}, {
+  field1: 'lastName',
+  field2: 'Family Name',
+  hasChip: false,
+  key: 3
+}, {
+  field1: 'population',
+  field2: 'Population',
+  hasChip: false,
+  key: 4
+}];
+var sx = {
+  mainContentBox: {
+    bg: 'accent.99',
+    alignItems: 'center',
+    maxWidth: '450px',
+    height: '220px'
+  },
+  innerContentBox: {
+    p: 'md'
+  },
+  applicationText: {
+    pl: 'sm',
+    fontWeight: '3',
+    lineHeight: '18.31px',
+    width: 'calc(50% - 22px)'
+  },
+  pingOneText: {
+    fontWeight: '3',
+    fontSize: 'md',
+    lineHeight: '18.31px'
+  },
+  separatorBox: {
+    px: 'sm'
+  },
+  separatorStyle: {
+    mt: 'sm',
+    mb: 'sm',
+    width: '100%'
+  },
+  mainFieldValueBox: {
+    pl: 'sm'
+  },
+  textFieldStyleProps: {
+    width: '165px',
+    py: '5px'
+  },
+  textFieldSeparator: {
+    mt: 'auto',
+    mb: 'auto',
+    width: '21px'
+  },
+  chipStyle: {
+    width: '65px',
+    height: '22px',
+    minWidth: 'fit-content',
+    alignSelf: 'center',
+    py: '3px',
+    ml: 'sm',
+    mr: 'xs',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    bg: 'white',
+    '& span': {
+      fontSize: 'sm',
+      width: '55px',
+      height: '16px'
+    }
+  }
+};
+export var Default = function Default() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    sx: sx.mainContentBox
+  }, ___EmotionJSX(Box, {
+    items: fieldValues,
+    sx: sx.innerContentBox
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    sx: sx.applicationText
+  }, "Application"), ___EmotionJSX(Text, {
+    sx: sx.pingOneText
+  }, "PingOne")), ___EmotionJSX(Box, {
+    sx: sx.separatorBox
+  }, ___EmotionJSX(Separator, {
+    sx: sx.separatorStyle
+  })), _mapInstanceProperty(fieldValues).call(fieldValues, function (_ref) {
+    var field1 = _ref.field1,
+        field2 = _ref.field2,
+        hasChip = _ref.hasChip,
+        key = _ref.key;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: key,
+      sx: sx.mainFieldValueBox
+    }, ___EmotionJSX(TextField, {
+      "aria-label": field1,
+      isReadOnly: true,
+      value: field1,
+      controlProps: {
+        variant: 'input.small',
+        sx: sx.textFieldStyleProps
+      }
+    }), ___EmotionJSX(Separator, {
+      sx: sx.textFieldSeparator
+    }), ___EmotionJSX(TextField, {
+      "aria-label": field2,
+      isReadOnly: true,
+      value: field2,
+      controlProps: {
+        variant: 'input.small',
+        sx: sx.textFieldStyleProps
+      }
+    }), hasChip && ___EmotionJSX(Chip, {
+      label: "Required",
+      textColor: "#253746",
+      sx: sx.chipStyle
+    }));
+  }))));
+};

package/lib/Patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -0,0 +1,145 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import CogsIcon from 'mdi-react/CogsIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import { Box, CheckboxField, ComboBoxField, Icon, IconButton, Separator, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/Attribute Mapping Edit View'
+};
+var editFieldValues = [{
+  field1: 'username',
+  field2: 'User ID',
+  key: 1
+}, {
+  field1: 'firstName',
+  field2: 'Given Name',
+  hasChip: false,
+  key: 2
+}, {
+  field1: 'lastName',
+  field2: 'Family Name',
+  hasChip: false,
+  key: 3
+}, {
+  field1: 'population',
+  field2: 'Population',
+  hasChip: false,
+  key: 4
+}];
+var sx = {
+  editFieldsBox: {
+    mb: 'md'
+  },
+  mainBox: {
+    maxWidth: '750px',
+    height: '263px',
+    'justifyContent': 'center',
+    bg: 'accent.99',
+    pl: 'md',
+    pr: 'md'
+  },
+  headerTextApplication: {
+    fontWeight: '3',
+    fontSize: 'md',
+    width: 'calc(50% - 26px)',
+    lineHeight: '18.31px',
+    pt: 'sm'
+  },
+  headerTextPingOne: {
+    fontWeight: '3',
+    fontSize: 'md',
+    width: 'calc(50% - 5px)',
+    lineHeight: '18.31px',
+    pt: 'sm'
+  },
+  headerTextRequired: {
+    fontWeight: '3',
+    fontSize: 'md',
+    width: 'calc(25% - 48px)',
+    lineHeight: '18.31px',
+    pt: 'sm'
+  },
+  separator: {
+    mt: 'xs',
+    mb: 'xs',
+    width: '100%'
+  },
+  checkboxField: {
+    'aria-label': 'Select',
+    pt: 'xs'
+  },
+  comboBoxFieldContainer: {
+    mb: 'xs'
+  },
+  comboBoxField: {
+    'aria-label': 'Edit Text Field',
+    width: '275px !important',
+    py: '11px',
+    pl: 'md',
+    pr: '45px',
+    lineHeight: '18.31px'
+  },
+  iconsBox: {
+    mt: 'sm'
+  }
+};
+export var Default = function Default() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    sx: sx.mainBox
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    sx: sx.headerTextApplication
+  }, "Application"), ___EmotionJSX(Text, {
+    sx: sx.headerTextPingOne
+  }, "PingOne"), ___EmotionJSX(Text, {
+    sx: sx.headerTextRequired
+  }, "Required")), ___EmotionJSX(Separator, {
+    sx: sx.separator
+  }), ___EmotionJSX(Box, {
+    items: editFieldValues,
+    sx: sx.editFieldsBox
+  }, _mapInstanceProperty(editFieldValues).call(editFieldValues, function (_ref) {
+    var field1 = _ref.field1,
+        field2 = _ref.field2,
+        key = _ref.key;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: key,
+      gap: "sm",
+      sx: sx.comboBoxFieldContainer
+    }, ___EmotionJSX(ComboBoxField, {
+      isReadonly: true,
+      value: field1,
+      controlProps: {
+        sx: sx.comboBoxField
+      }
+    }), ___EmotionJSX(ComboBoxField, {
+      isReadonly: true,
+      value: field2,
+      controlProps: {
+        sx: sx.comboBoxField
+      }
+    }), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "lg",
+      sx: sx.iconsBox
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "Cogs Icon"
+    }, ___EmotionJSX(Icon, {
+      icon: CogsIcon,
+      size: 24
+    })), ___EmotionJSX(CheckboxField, {
+      status: "default",
+      containerProps: {
+        sx: sx.checkboxField
+      }
+    }), ___EmotionJSX(IconButton, {
+      "aria-label": "Delete Icon"
+    }, ___EmotionJSX(Icon, {
+      icon: DeleteIcon,
+      size: 24
+    }))));
+  }))));
+};

package/lib/Patterns/ListAndPanelPattern.stories.hidden.js

@@ -0,0 +1,381 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useState, useRef } from 'react';
+import AccountIcon from 'mdi-react/AccountIcon';
+import Close from 'mdi-react/CloseIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
+import DotsVertical from 'mdi-react/DotsVerticalIcon';
+import { useOverlayPanelState } from '../hooks';
+import { pingImg } from '../utils/devUtils/constants/images';
+import { Avatar, Box, Icon, IconButton, ListItem, OverlayProvider, OverlayPanel, Separator, SearchField, SwitchField, Tab, Tabs, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/List And Panel'
+};
+var usersInfo = [{
+  fullname: 'Fons, Vernall',
+  firstname: 'Fons',
+  lastname: 'Vernall',
+  email: 'fvernall0@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Priya, Ponnappa',
+  firstname: 'Priya',
+  lastname: 'Ponnappa',
+  email: 'Priyaponnappa0w@google.it',
+  hasIcon: false,
+  avatar: pingImg
+}, {
+  fullname: 'French, Tamzyn',
+  firstname: 'French',
+  lastname: 'Tamzyn',
+  email: 'frenchtamzyn03@google.it',
+  hasIcon: false,
+  avatar: pingImg
+}, {
+  fullname: 'John, Stone',
+  firstname: 'John',
+  lastname: 'Stone',
+  email: 'johnsstone2@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Ang, Li',
+  firstname: 'Ang',
+  lastname: 'Li',
+  email: 'Angli022@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Eugenia, Anders',
+  firstname: 'Eugenia',
+  lastname: 'Anders',
+  email: 'EugeniaaAnders2@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Trevor, Virtue',
+  firstname: 'Trevor',
+  lastname: 'Virtue',
+  email: 'TrevorVirtue33@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Salome, Simoes',
+  firstname: 'Salome',
+  lastname: 'Simoes',
+  email: 'SalomesimoesS@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Verona, Blair',
+  firstname: 'Verona',
+  lastname: 'Blair',
+  email: 'VeronaBlair01@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Tarryn, Campbell-Gillies',
+  firstname: 'Tarryn',
+  lastname: 'Campbell-Gillies',
+  email: 'tarryncampbellGillies@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Daly, Harry',
+  firstname: 'Daly',
+  lastname: 'Harry',
+  email: 'Daly93Harry@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Dallas, Potter',
+  firstname: 'Dallas',
+  lastname: 'Potter',
+  email: 'DallasPotter94@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}, {
+  fullname: 'Alexander, Crawford',
+  firstname: 'Alexander',
+  lastname: 'Crawford',
+  email: 'alexCrawford011@google.it',
+  hasIcon: true,
+  avatar: AccountIcon
+}];
+var sx = {
+  mainBox: {
+    bg: 'accent.99'
+  },
+  contentBox: {
+    p: 'md',
+    m: 'sm',
+    'justifyContent': 'center',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchFieldStyle: {
+    mb: 'sm'
+  },
+  searchFieldStyleProps: {
+    variant: 'input.small',
+    py: '11px',
+    pl: '42px',
+    pr: '47px',
+    height: '40px',
+    width: '400px'
+  },
+  listItemBoxStyle: {
+    alignSelf: 'center',
+    mr: 'auto'
+  },
+  emailBoxStyle: {
+    lineHeight: '15.51px'
+  },
+  iconStyle: {
+    alignSelf: 'center',
+    mr: 'sm',
+    color: 'accent.40'
+  },
+  avatarStyle: {
+    mr: 'md',
+    width: '25px',
+    height: '25px'
+  },
+  subtitleTextStyle: {
+    mt: '1'
+  },
+  switchFieldStyle: {
+    mt: 'xs'
+  },
+  dotsVerticalIcon: {
+    color: 'neutral.20'
+  },
+  closeIconStyle: {
+    color: 'neutral.20'
+  },
+  separatorStyle: {
+    m: '0',
+    bg: 'accent.90'
+  },
+  overlayPanelStyle: {
+    p: '0'
+  },
+  overlayPanelListItemBox: {
+    width: '100%'
+  },
+  listItemInPanelStyle: {
+    justifyContent: 'space-between'
+  },
+  tabsBox: {
+    px: 'md'
+  },
+  tabsListPropsStyle: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  tabsCreateIconButton: {
+    ml: 'auto'
+  },
+  tabsBoldText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    height: '16px'
+  },
+  tabsFirstAndLastNameText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    width: '68px',
+    height: '16px'
+  },
+  tabsEmailText: {
+    mb: 'sm',
+    lineHeight: '15.87px',
+    fontWeight: '3',
+    fontSize: 'sm',
+    width: '35px',
+    height: '16px'
+  },
+  tabsSelectedItemText: {
+    mb: 'sm',
+    height: '18px',
+    fontWeight: '0',
+    fontSize: 'md',
+    lineHeight: '17.89px'
+  }
+};
+export var Default = function Default() {
+  var _useState = useState(usersInfo),
+      _useState2 = _slicedToArray(_useState, 1),
+      items = _useState2[0];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = useRef();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+    sx: sx.mainBox
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentBox
+  }, ___EmotionJSX(SearchField, {
+    controlProps: {
+      sx: sx.searchFieldStyleProps
+    },
+    containerProps: {
+      sx: sx.searchFieldStyle
+    },
+    position: "fixed",
+    "aria-label": "Search",
+    placeholder: "Search"
+  }), _mapInstanceProperty(items).call(items, function (person) {
+    return ___EmotionJSX(Box, {
+      key: person.email,
+      sx: sx.emailBoxStyle
+    }, ___EmotionJSX(ListItem, {
+      name: person.fullname,
+      onClick: function onClick() {
+        state.toggle();
+        setSelected(person);
+      }
+    }, ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+      isRow: true,
+      sx: sx.listItemBoxStyle
+    }, person.hasIcon ? ___EmotionJSX(Icon, {
+      icon: person.avatar,
+      sx: sx.iconStyle,
+      size: 24
+    }) : ___EmotionJSX(Avatar, {
+      sx: sx.avatarStyle,
+      src: person.avatar
+    }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      variant: "itemTitle"
+    }, person.fullname), ___EmotionJSX(Text, {
+      sx: sx.subtitleTextStyle,
+      variant: "itemSubtitle"
+    }, person.email))), ___EmotionJSX(Box, null, ___EmotionJSX(SwitchField, {
+      containerProps: {
+        sx: sx.switchFieldStyle
+      },
+      "aria-label": "active user",
+      isDefaultSelected: true,
+      label: "",
+      value: "my-switch"
+    })), ___EmotionJSX(Box, {
+      alignSelf: "center",
+      isRow: true
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "Dots Vertical Icon"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVertical,
+      sx: sx.dotsVerticalIcon,
+      size: 24
+    }))))), ___EmotionJSX(Separator, {
+      sx: sx.separatorStyle
+    }));
+  })), state.isOpen && ___EmotionJSX(OverlayPanel, {
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    sx: sx.overlayPanelStyle
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.overlayPanelListItemBox
+  }, ___EmotionJSX(ListItem, {
+    name: selected.fullname,
+    sx: sx.listItemInPanelStyle
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, selected.hasIcon ? ___EmotionJSX(Icon, {
+    icon: selected.avatar,
+    sx: sx.iconStyle,
+    size: 24
+  }) : ___EmotionJSX(Avatar, {
+    sx: sx.avatarStyle,
+    src: selected.avatar
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "itemTitle"
+  }, selected.fullname), ___EmotionJSX(Text, {
+    sx: sx.subtitleTextStyle,
+    variant: "itemSubtitle"
+  }, selected.email))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    label: "",
+    value: "my-switch",
+    justifyContent: "center"
+  }), ___EmotionJSX(IconButton, {
+    "aria-label": "Dots Vertical Icon"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVertical,
+    sx: sx.dotsVerticalIcon,
+    size: 24
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "Close Icon Button",
+    onPress: function onPress() {
+      onClose(state, triggerRef);
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: Close,
+    sx: sx.closeIconStyle,
+    size: 24
+  }))))), ___EmotionJSX(Box, {
+    sx: sx.tabsBox
+  }, ___EmotionJSX(Tabs, {
+    items: items,
+    tabListProps: {
+      sx: sx.tabsListPropsStyle
+    }
+  }, ___EmotionJSX(Tab, {
+    key: "tab1",
+    title: "Profile",
+    "aria-label": "Tab 1"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    "aria-label": "Create Icon",
+    variant: "inverted",
+    sx: sx.tabsCreateIconButton
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }))), ___EmotionJSX(Text, {
+    sx: sx.tabsBoldText
+  }, "Full Name"), ___EmotionJSX(Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Fullname"
+  }, selected.fullname), ___EmotionJSX(Text, {
+    sx: sx.tabsBoldText
+  }, "First Name"), ___EmotionJSX(Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Firstname"
+  }, selected.firstname), ___EmotionJSX(Text, {
+    sx: sx.tabsBoldText
+  }, "Last Name"), ___EmotionJSX(Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Lastname"
+  }, selected.lastname), ___EmotionJSX(Text, {
+    sx: sx.tabsBoldText
+  }, "Email"), ___EmotionJSX(Text, {
+    sx: sx.tabsSelectedItemText,
+    "aria-label": "Selected Email"
+  }, selected.email)), ___EmotionJSX(Tab, {
+    key: "tab2",
+    title: "Group Memberships",
+    "aria-label": "Tab 2"
+  }, ___EmotionJSX(Text, null, "Placeholder content for group membership tab")), ___EmotionJSX(Tab, {
+    key: "tab3",
+    title: "Account Info",
+    "aria-label": "Tab 3"
+  }, ___EmotionJSX(Text, null, "Placeholder content for account info tab"))))))));
+};