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

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

@@ -0,0 +1,69 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import React, { useState } from 'react';
+import { Box, Button, Item, Messages } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/Messages'
+};
+export var Default = function Default() {
+  var messages = {
+    neutral: {
+      text: 'Here is a very neutral thing'
+    },
+    success: {
+      text: 'Form saved successfully',
+      status: 'success'
+    },
+    warning: {
+      text: 'Something unexpected happened.',
+      status: 'warning'
+    },
+    error: {
+      text: 'Not saved! We could not validate one of the fields. Please see inline message below.',
+      status: 'error'
+    }
+  };
+  var sx = {
+    mainContentBox: {
+      p: 'xx'
+    }
+  };
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      messageState = _useState2[0],
+      setMessageState = _useState2[1];
+
+  var handleUpdateMessage = function handleUpdateMessage(message) {
+    setMessageState(message);
+
+    _setTimeout(function () {
+      return setMessageState(null);
+    }, 3000);
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "lg",
+    sx: sx.mainContentBox
+  }, ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.neutral);
+    }
+  }, "Neutral"), ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.success);
+    }
+  }, "Success"), ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.warning);
+    }
+  }, "Warning"), ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return handleUpdateMessage(messages.error);
+    }
+  }, "Error")), ___EmotionJSX(Box, null, ___EmotionJSX(Messages, null, messageState && ___EmotionJSX(Item, {
+    status: messageState.status
+  }, messageState.text))));
+};

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

@@ -0,0 +1,80 @@
+import React, { useRef } from 'react';
+import { DummyText } from '../utils/devUtils/constants/text';
+import { useOverlayPanelState } from '../hooks';
+import { Box, Button, OverlayPanel, OverlayProvider, ScrollBox, TextField } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/Save Bar'
+};
+var sx = {
+  mainContentBox: {
+    p: 'xl',
+    justifyContent: 'center'
+  },
+  overlayPanelStyle: {
+    width: '720px',
+    height: '100%'
+  },
+  overlayPanelMainBox: {
+    height: '100%'
+  },
+  overlayPanelInnerBox: {
+    p: 'sm'
+  },
+  scrollboxStyle: {
+    m: 'sm'
+  },
+  saveButtonStyle: {
+    p: '10px 15px',
+    width: '65px',
+    height: '38px',
+    lineHeight: '18.31px'
+  },
+  cancelButtonStyle: {
+    m: 'sm',
+    lineHeight: '18.31px'
+  }
+};
+export var Default = function Default() {
+  var _useOverlayPanelState = useOverlayPanelState(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = useRef();
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    sx: sx.mainContentBox
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    sx: sx.overlayPanelStyle
+  }, ___EmotionJSX(Box, {
+    sx: sx.overlayPanelMainBox
+  }, ___EmotionJSX(Box, {
+    sx: sx.overlayPanelInnerBox,
+    gap: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Placeholder"
+  }), ___EmotionJSX(TextField, {
+    label: "Placeholder"
+  }), ___EmotionJSX(TextField, {
+    label: "Placeholder"
+  })), ___EmotionJSX(ScrollBox, {
+    sx: sx.scrollboxStyle
+  }, ___EmotionJSX("p", null, DummyText)), ___EmotionJSX(Box, {
+    isRow: true,
+    position: "fixed"
+  }, ___EmotionJSX(Button, {
+    sx: sx.saveButtonStyle,
+    variant: "primary"
+  }, "Save"), ___EmotionJSX(Button, {
+    sx: sx.cancelButtonStyle,
+    variant: "link",
+    onPress: function onPress() {
+      onClose(state, triggerRef);
+    }
+  }, "Cancel")))))));
+};

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

@@ -0,0 +1,106 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import React, { useState } from 'react';
+import { useModalState } from '../hooks';
+import { Box, Button, Modal, OverlayProvider, Text, TextField, Link, Messages, Item } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design Patterns/Unsaved Changes'
+};
+export var Default = function Default() {
+  var state = useModalState();
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isShowingNeutral = _useState4[0],
+      setIsShowingNeutral = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isShowingSuccess = _useState6[0],
+      setIsShowingSuccess = _useState6[1];
+
+  var closeModalAndClearInput = function closeModalAndClearInput() {
+    setValue('');
+    state.close();
+    setIsShowingNeutral(true);
+
+    _setTimeout(function () {
+      return setIsShowingNeutral(false);
+    }, 3000);
+  };
+
+  var closeModalAndShowSuccess = function closeModalAndShowSuccess() {
+    setValue('');
+    state.close();
+    setIsShowingSuccess(true);
+
+    _setTimeout(function () {
+      return setIsShowingSuccess(null);
+    }, 3000);
+  };
+
+  var sx = {
+    mainContentBox: {
+      p: 'xx'
+    },
+    textFieldBoxStyle: {
+      p: 'sm'
+    },
+    modalTextSaveChanges: {
+      mb: 'lg',
+      fontWeight: '0',
+      fontSize: 'xx',
+      lineHeight: '23px'
+    },
+    modalTextSaveOrDiscard: {
+      mb: 'lg',
+      fontSize: 'md',
+      lineHeight: '17.89px',
+      fontWeight: '0'
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+    sx: sx.mainContentBox,
+    gap: "lg"
+  }, ___EmotionJSX(Box, {
+    sx: sx.textFieldBoxStyle,
+    gap: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Place Holder",
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    value: value
+  })), ___EmotionJSX(Link, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Go Somewhere Else")), state.isOpen && ___EmotionJSX(Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
+    hasCloseButton: true
+  }, ___EmotionJSX(Text, {
+    sx: sx.modalTextSaveChanges,
+    variant: "Bold"
+  }, "Save Changes?"), ___EmotionJSX(Text, {
+    sx: sx.modalTextSaveOrDiscard
+  }, "Save or discard your changes before leaving this page."), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: closeModalAndShowSuccess
+  }, "Save"), ___EmotionJSX(Button, {
+    onPress: closeModalAndClearInput
+  }, "Discard Changes"), ___EmotionJSX(Button, {
+    variant: "link",
+    onPress: state.close
+  }, "Cancel"))), ___EmotionJSX(Messages, null, isShowingNeutral && ___EmotionJSX(Item, null, "Changes have been Discarded."), isShowingSuccess && ___EmotionJSX(Item, {
+    status: "success"
+  }, "Form has been saved successfully."))));
+};

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

@@ -0,0 +1,158 @@
+"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["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design Patterns/Attribute Mapping Display View'
+};
+exports["default"] = _default;
+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'
+    }
+  }
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainContentBox
+  }, (0, _react2.jsx)(_index.Box, {
+    items: fieldValues,
+    sx: sx.innerContentBox
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.applicationText
+  }, "Application"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.pingOneText
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: sx.separatorBox
+  }, (0, _react2.jsx)(_index.Separator, {
+    sx: sx.separatorStyle
+  })), (0, _map["default"])(fieldValues).call(fieldValues, function (_ref) {
+    var field1 = _ref.field1,
+        field2 = _ref.field2,
+        hasChip = _ref.hasChip,
+        key = _ref.key;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      key: key,
+      sx: sx.mainFieldValueBox
+    }, (0, _react2.jsx)(_index.TextField, {
+      "aria-label": field1,
+      isReadOnly: true,
+      value: field1,
+      controlProps: {
+        variant: 'input.small',
+        sx: sx.textFieldStyleProps
+      }
+    }), (0, _react2.jsx)(_index.Separator, {
+      sx: sx.textFieldSeparator
+    }), (0, _react2.jsx)(_index.TextField, {
+      "aria-label": field2,
+      isReadOnly: true,
+      value: field2,
+      controlProps: {
+        variant: 'input.small',
+        sx: sx.textFieldStyleProps
+      }
+    }), hasChip && (0, _react2.jsx)(_index.Chip, {
+      label: "Required",
+      textColor: "#253746",
+      sx: sx.chipStyle
+    }));
+  }))));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,167 @@
+"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["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CogsIcon = _interopRequireDefault(require("mdi-react/CogsIcon"));
+
+var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Design Patterns/Attribute Mapping Edit View'
+};
+exports["default"] = _default;
+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'
+  }
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainBox
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.headerTextApplication
+  }, "Application"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.headerTextPingOne
+  }, "PingOne"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.headerTextRequired
+  }, "Required")), (0, _react2.jsx)(_index.Separator, {
+    sx: sx.separator
+  }), (0, _react2.jsx)(_index.Box, {
+    items: editFieldValues,
+    sx: sx.editFieldsBox
+  }, (0, _map["default"])(editFieldValues).call(editFieldValues, function (_ref) {
+    var field1 = _ref.field1,
+        field2 = _ref.field2,
+        key = _ref.key;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      key: key,
+      gap: "sm",
+      sx: sx.comboBoxFieldContainer
+    }, (0, _react2.jsx)(_index.ComboBoxField, {
+      isReadonly: true,
+      value: field1,
+      controlProps: {
+        sx: sx.comboBoxField
+      }
+    }), (0, _react2.jsx)(_index.ComboBoxField, {
+      isReadonly: true,
+      value: field2,
+      controlProps: {
+        sx: sx.comboBoxField
+      }
+    }), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "lg",
+      sx: sx.iconsBox
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "Cogs Icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CogsIcon["default"],
+      size: 24
+    })), (0, _react2.jsx)(_index.CheckboxField, {
+      status: "default",
+      containerProps: {
+        sx: sx.checkboxField
+      }
+    }), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "Delete Icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: 24
+    }))));
+  }))));
+};
+
+exports.Default = Default;