@pingux/astro 1.0.0-alpha.1 → 1.0.0-alpha.13

package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _index = require("../index");
+
+var _RadioField = _interopRequireDefault(require("../components/RadioField"));
+
+var _RadioGroupField = _interopRequireDefault(require("../components/RadioGroupField"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/RadioButtonsWithLinks'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var roles = [{
+    name: 'Client Application Developer'
+  }, {
+    name: 'Environment Admin',
+    isDisabled: true
+  }, {
+    name: 'Identity Data Admin',
+    isDisabled: true
+  }, {
+    name: 'Organization Admin'
+  }];
+  var titleSx = {
+    fontSize: 'md',
+    color: 'neutral.20',
+    fontWeight: 2
+  };
+  var subtitleSx = {
+    fontSize: 'md',
+    color: 'neutral.10'
+  };
+
+  var RadioFieldWithButton = function RadioFieldWithButton(_ref) {
+    var fieldName = _ref.fieldName,
+        isDisabled = _ref.isDisabled;
+
+    var _useState = (0, _react.useState)(false),
+        _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+        isOpen = _useState2[0],
+        setIsOpen = _useState2[1];
+
+    return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center"
+    }, (0, _react2.jsx)(_RadioField["default"], {
+      value: fieldName,
+      label: fieldName,
+      isDisabled: isDisabled
+    }), (0, _react2.jsx)(_index.Button, {
+      variant: "text",
+      mb: "xs",
+      ml: "md",
+      onPress: function onPress() {
+        return setIsOpen(function (prev) {
+          return !prev;
+        });
+      },
+      isDisabled: isDisabled
+    }, "".concat(isOpen ? 'Hide' : 'Show', " Permissions"))), isOpen && (0, _react2.jsx)(PermissionsList, {
+      onPress: function onPress() {
+        return setIsOpen(false);
+      }
+    }));
+  };
+
+  var PermissionsList = function PermissionsList(_ref2) {
+    var onPress = _ref2.onPress;
+    return (0, _react2.jsx)(_index.Box, {
+      p: "md",
+      bg: "neutral.95"
+    }, (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      justifyContent: "space-between",
+      mb: "sm"
+    }, (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontWeight: 2
+      }
+    }, "Permissions"), (0, _react2.jsx)(_index.IconButton, {
+      onPress: onPress
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CloseIcon["default"]
+    }))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Resource"), (0, _react2.jsx)(_index.Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Push Credentials"), (0, _react2.jsx)(_index.Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"), (0, _react2.jsx)(_index.Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Organization"), (0, _react2.jsx)(_index.Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"), (0, _react2.jsx)(_index.Text, {
+      sx: titleSx,
+      mb: "xs"
+    }, "Image"), (0, _react2.jsx)(_index.Text, {
+      sx: subtitleSx,
+      mb: "sm"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
+  };
+
+  return (0, _react2.jsx)(_RadioGroupField["default"], null, (0, _map["default"])(roles).call(roles, function (_ref3) {
+    var name = _ref3.name,
+        isDisabled = _ref3.isDisabled;
+    return (0, _react2.jsx)(RadioFieldWithButton, {
+      fieldName: name,
+      isDisabled: isDisabled,
+      key: name
+    });
+  }));
+};
+
+exports.Default = Default;

package/lib/cjs/styles/forms/input.js

@@ -71,6 +71,17 @@ var input = _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
   '&::placeholder': _text.text.placeholder,
   '&::-ms-expand': {
     display: 'none'
+  },
+  '&::-webkit-contacts-auto-fill-button, &::-webkit-credentials-auto-fill-button': {
+    visibility: 'hidden',
+    display: 'none !important',
+    pointerEvents: 'none',
+    height: 0,
+    width: 0,
+    margin: 0
+  },
+  '&::-ms-reveal, &::-ms-clear': {
+    display: 'none'
   }
 }); // Example variant input
 

package/lib/cjs/styles/variants/accordion.js

@@ -23,12 +23,12 @@ var accordionTitle = {
 var accordion = {
   display: 'flex',
   mt: '5px',
-  mb: '5px',
+  mb: '20px',
   alignItems: 'flex-start'
 };
 var accordionBody = {
   display: 'none !important',
-  p: 'md',
+  pt: 'md',
   width: '100%',
   '.is-open &': {
     display: 'flex !important'

package/lib/cjs/styles/variants/boxes.js

@@ -106,6 +106,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': {
     boxShadow: 'inset 0 0 5px #5873bdbf'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
   }
 });
 
@@ -250,6 +254,28 @@ var datePicker = {
     }
   }
 };
+var fileInputFieldWrapper = {
+  display: 'flex',
+  border: '1px dashed',
+  borderColor: 'active',
+  padding: '10px 0',
+  '&.is-drag-active': {
+    backgroundColor: 'accent.95'
+  },
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  },
+  '&.is-success': {
+    borderColor: 'success.dark'
+  },
+  '&.is-warning': {
+    borderColor: 'warning.dark'
+  },
+  '&.is-loading': {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
 var _default = {
   base: base,
   card: card,
@@ -258,6 +284,7 @@ var _default = {
   datePicker: datePicker,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
   listViewItem: listViewItem,

package/lib/cjs/styles/variants/buttons.js

@@ -330,7 +330,7 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   height: '22px',
   lineHeight: 1,
-  fontSize: '14px',
+  fontSize: 'sm',
   borderRadius: '15px',
   border: '1px solid',
   borderColor: 'active',
@@ -473,6 +473,25 @@ var expandableRow = {
     }
   }
 };
+var fileInputField = {
+  background: 'none',
+  cursor: 'pointer',
+  '& span': {
+    textAlign: 'initial'
+  },
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'pointer',
+    '& span': {
+      textDecoration: 'underline'
+    }
+  },
+  '&.is-focused': {
+    boxShadow: 'focus'
+  }
+};
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -491,6 +510,7 @@ var _default = {
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
   expandableRow: expandableRow,
+  fileInputField: fileInputField,
   iconButton: iconButton,
   icon: icon,
   imageUpload: imageUpload,

package/lib/cjs/styles/variants/tabs.js

@@ -14,6 +14,7 @@ var tab = {
   display: 'inline-flex',
   outline: 'none',
   transform: 'translateY(1px)',
+  width: '100%',
   '&.is-focused': {
     boxShadow: 'focus'
   },

package/lib/components/AccordionItem/AccordionItem.js

@@ -80,7 +80,9 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": ariaLabel || 'Accordion',
     ref: buttonRef,
     sx: {
-      display: 'flex'
+      display: 'flex',
+      px: '0',
+      height: 'unset'
     },
     variant: "accordionHeader",
     className: buttonClasses

package/lib/components/Button/Button.stories.js

@@ -1,8 +1,3 @@
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
-var _context;
-
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
 import Box from '../Box';
@@ -15,7 +10,9 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
 delete variants.ICON;
 delete variants.ICON_BUTTON;
-delete variants.INVERTED;
+delete variants.INVERTED; // add designer approved variants for devs to use here
+
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 export default {
   title: 'Button',
   component: Button,
@@ -23,11 +20,9 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: _Object$values(variants)
+        options: variantOptions
       },
-      defaultValue: _findInstanceProperty(_context = _Object$values(variants)).call(_context, function (value) {
-        return value === 'default';
-      })
+      defaultValue: 'default'
     },
     children: {
       description: 'Button text.',

package/lib/components/CopyText/CopyText.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -11,6 +9,7 @@ import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { Box, Button, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var TooltipWrapper = function TooltipWrapper(_ref) {
@@ -75,75 +74,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 
     return undefined;
   }, [isCopied]);
-
-  var copyToClipboard = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var textArea, isSuccessful;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-
-              if (!navigator.clipboard) {
-                _context.next = 7;
-                break;
-              }
-
-              _context.next = 4;
-              return navigator.clipboard.writeText(value);
-
-            case 4:
-              setIsCopied(true);
-              _context.next = 20;
-              break;
-
-            case 7:
-              // Workaround for copying in insecure origin
-              textArea = document.createElement('textarea');
-              textArea.value = value;
-              textArea.style.position = 'fixed';
-              document.body.appendChild(textArea);
-              textArea.focus();
-              textArea.select();
-              isSuccessful = document.execCommand('copy');
-              textArea.remove();
-
-              if (!isSuccessful) {
-                _context.next = 19;
-                break;
-              }
-
-              setIsCopied(isSuccessful);
-              _context.next = 20;
-              break;
-
-            case 19:
-              throw new Error('Unable to copy message');
-
-            case 20:
-              _context.next = 25;
-              break;
-
-            case 22:
-              _context.prev = 22;
-              _context.t0 = _context["catch"](0);
-              // eslint-disable-next-line no-console
-              console.error('Failed to copy: ', _context.t0);
-
-            case 25:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 22]]);
-    }));
-
-    return function copyToClipboard() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
+  var copyToClipboard = useCopyToClipboard(value, setIsCopied);
   var content = mode === 'link' ? children : ___EmotionJSX(Button, _extends({
     variant: "quiet",
     onPress: copyToClipboard,