@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

package/lib/cjs/index.js

@@ -34,6 +34,7 @@ var _exportNames = {
   ComboBoxField: true,
   CopyText: true,
   ColorField: true,
+  EnvironmentBreadcrumb: true,
   FieldHelperText: true,
   FileInputField: true,
   HelpHint: true,
@@ -214,6 +215,13 @@ _Object$defineProperty(exports, "ColorField", {
   }
 });
 
+_Object$defineProperty(exports, "EnvironmentBreadcrumb", {
+  enumerable: true,
+  get: function get() {
+    return _EnvironmentBreadcrumb["default"];
+  }
+});
+
 _Object$defineProperty(exports, "FieldHelperText", {
   enumerable: true,
   get: function get() {
@@ -817,6 +825,8 @@ var _CopyText = _interopRequireDefault(require("./components/CopyText"));
 
 var _ColorField = _interopRequireDefault(require("./components/ColorField"));
 
+var _EnvironmentBreadcrumb = _interopRequireDefault(require("./components/EnvironmentBreadcrumb"));
+
 var _FieldHelperText = _interopRequireWildcard(require("./components/FieldHelperText"));
 
 _forEachInstanceProperty(_context14 = _Object$keys(_FieldHelperText)).call(_context14, function (key) {

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

@@ -274,6 +274,18 @@ var datePicker = {
     }
   }
 };
+
+var environmentChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+
 var fileInputFieldWrapper = {
   display: 'flex',
   border: '1px dashed',
@@ -302,6 +314,7 @@ var _default = {
   chip: chip,
   copy: copy,
   datePicker: datePicker,
+  environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,

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

@@ -317,6 +317,11 @@ var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
   ml: '5px',
   maxWidth: '13px',
   maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
   'path': {
     fill: 'neutral.20'
   },
@@ -376,7 +381,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -485,6 +490,28 @@ var expandableRow = {
     }
   }
 };
+var environmentBreadcrumb = {
+  current: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.30',
+    fontSize: 'md',
+    fontWeight: 1,
+    '&.is-hovered, &.is-focused': {
+      color: 'active',
+      textDecoration: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-pressed': {
+      color: 'accent.20',
+      textDecoration: 'none'
+    }
+  }),
+  selectItem: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
 var fileInputField = {
   background: 'none',
   cursor: 'pointer',
@@ -534,6 +561,75 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -551,8 +647,10 @@ var _default = {
     '&.is-pressed': _objectSpread({}, defaultActive),
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
@@ -572,6 +670,7 @@ var _default = {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };
 exports["default"] = _default;

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

@@ -139,6 +139,14 @@ var expandableRow = {
     }
   }
 };
+
+var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: 'sm',
+  fontWeight: 3,
+  color: 'secondary',
+  textTransform: 'capitalize'
+});
+
 var navBarSubtitle = {
   fontWeight: 3,
   fontSize: '11px',
@@ -170,11 +178,26 @@ var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
   inputValue: {
     fontWeight: 1,

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
@@ -54,6 +54,9 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'Text':
         return Text;
 
+      case 'Fragment':
+        return Fragment;
+
       default:
         return elementType;
     }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,7 +1,9 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useRef, useImperativeHandle, Fragment } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, Fragment, useCallback } from 'react';
 import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
@@ -21,7 +23,12 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       icon = props.icon,
       iconProps = props.iconProps,
       onAction = props.onAction,
-      others = _objectWithoutProperties(props, ["children", "icon", "iconProps", "onAction"]);
+      others = _objectWithoutProperties(props, ["children", "icon", "iconProps", "onAction"]); // the following filters undefined values passed as a child
+
+
+  var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
+    return child;
+  }) : children;
 
   var _useBreadcrumbs = useBreadcrumbs(props),
       wrapperProps = _useBreadcrumbs.navProps;
@@ -33,26 +40,28 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return breadcrumbsRef.current;
   });
-  return ___EmotionJSX(Box, _extends({
-    ref: breadcrumbsRef,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    sx: {
-      overflow: 'auto'
-    }
-  }, mergeProps(wrapperProps, others)), _mapInstanceProperty(children).call(children, function (child, idx) {
+  var createBreadcrumb = useCallback(function (child, idx) {
+    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return ___EmotionJSX(Fragment, {
       key: "fragment-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
-      isCurrent: idx === children.length - 1,
+      isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key
-    }, child.props), child.props.children), icon && idx !== children.length - 1 && ___EmotionJSX(Icon, _extends({
+    }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       icon: icon
     }, iconProps)));
-  }));
+  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+  return ___EmotionJSX(Box, _extends({
+    ref: breadcrumbsRef,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    sx: {
+      overflow: 'auto'
+    }
+  }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -89,4 +89,13 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var item = screen.getByText(testItemsArr[0]);
   expect(item).toBeInTheDocument();
   expect(item).toHaveAttribute('data-id', testItemsArr[0]);
+});
+test('will render correctly with single child item', function () {
+  render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps), ___EmotionJSX(Item, {
+    key: testItemsArr[0],
+    "data-id": testItemsArr[0],
+    isCurrent: true
+  }, testItemsArr[0])));
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
 });

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -37,7 +37,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
+      variant = props.variant,
+      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"]);
 
   var buttonRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -70,6 +71,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
+  useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
   return ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
     ref: buttonRef,
@@ -80,7 +82,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    }
+    },
+    variant: variant
   }, others, mergeProps(hoverProps, focusProps, buttonProps)), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'

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

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
-import Box from '../Box';
-import Button from '.';
-import Icon from '../Icon';
-import Text from '../Text';
-import { buttonVariants } from '../../utils/devUtils/constants/variants'; // removing the iconButton variants from this story.
+import CreateIcon from 'mdi-react/CreateIcon';
+import FilterIcon from 'mdi-react/FilterIcon';
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import { Box, Button, Icon, SearchField, Text } from '../../index'; // removing the iconButton variants from this story.
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
@@ -36,6 +37,13 @@ export default {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 export var Default = function Default(args) {
@@ -74,4 +82,44 @@ export var InlineButton = function InlineButton() {
     mb: "sm",
     variant: "inline"
   }, "Inline");
+};
+export var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = _objectWithoutProperties(args, ["isConfigured"]);
+
+  return ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
+};
+export var FilterButton = function FilterButton() {
+  return ___EmotionJSX(Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(SearchField, {
+    "aria-label": "search items"
+  }), ___EmotionJSX(Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, ___EmotionJSX(Icon, {
+    icon: FilterIcon
+  })));
 };

package/lib/components/Button/Button.test.js

@@ -89,4 +89,24 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+  userEvent.tab();
+  expect(button).toHaveClass('is-focused');
+  expect(button).toHaveFocus();
+});
+test('color block button renders in configured state', function () {
+  getComponent({
+    variant: 'colorBlock',
+    className: 'is-configured'
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/components/CopyText/CopyButton.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import ContentCopy from 'mdi-react/ContentCopyIcon';
+import { omit } from 'lodash';
+import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -9,9 +11,12 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     "aria-label": "copy",
     variant: "buttons.copy"
-  }, props), ___EmotionJSX(Icon, {
+  }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
     size: 15
-  }));
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
+CopyButton.propTypes = {
+  iconProps: PropTypes.shape({})
+};
 export default CopyButton;