@pingux/astro 1.37.2 → 1.38.0-alpha.0

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

@@ -193,7 +193,10 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   cursor: 'default',
   m: 5,
   mr: 10,
-  ml: 0
+  ml: 0,
+  '& span': {
+    mr: '2px'
+  }
 });
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
@@ -208,6 +211,18 @@ var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   borderColor: 'neutral.80'
 });
 
+var itemChipWithSlot = _objectSpread(_objectSpread({}, readOnlyChip), {}, {
+  p: 3,
+  my: 0,
+  backgroundColor: 'white',
+  '& span': {
+    color: 'text.primary',
+    mr: '2px',
+    lineHeight: '16px'
+  },
+  maxHeight: '22px'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -406,6 +421,7 @@ var _default = {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  itemChipWithSlot: itemChipWithSlot,
   textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,

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

@@ -435,13 +435,16 @@ var quiet = {
   all: 'unset',
   display: 'flex'
 };
-var chipDeleteButton = {
+var chipDeleteStandard = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  mx: '3px !important',
   p: 0,
   width: 14,
+  mx: '3px !important'
+};
+
+var chipDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
   '&.is-focused, &.is-hovered': _objectSpread({
     bg: 'accent.40'
   }, focusWithCroppedOutline),
@@ -449,7 +452,26 @@ var chipDeleteButton = {
     bg: 'accent.20',
     borderColor: 'accent.20'
   }
-};
+});
+
+var chipWithSlotDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
+  path: {
+    fill: 'neutral.40'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    backgroundColor: '#e5e9f8 !important',
+    path: {
+      fill: 'neutral.40'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: '#4462ED !important'
+  }
+});
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
   border: '0',
@@ -741,6 +763,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
+  chipWithSlotDeleteButton: chipWithSlotDeleteButton,
   close: close,
   colorField: colorField,
   comboBox: comboBox,

package/lib/components/Chip/Chip.js

@@ -33,7 +33,8 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textProps = props.textProps,
       label = props.label,
       align = props.align,
-      isUppercase = props.isUppercase;
+      isUppercase = props.isUppercase,
+      slots = props.slots;
 
   var sx = _objectSpread({}, isUppercase && {
     paddingBottom: '3px'
@@ -53,7 +54,9 @@ var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     variant: "boxes.chip",
     sx: sx,
     ref: ref
-  }, props), ___EmotionJSX(Text, _extends({
+  }, props), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
+    mr: "xs"
+  }, slots.leftIcon), ___EmotionJSX(Text, _extends({
     variant: "label",
     color: textColor,
     sx: isUppercase && {
@@ -69,6 +72,12 @@ Chip.propTypes = {
   /** The background color of the chip. */
   bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into left side of the chip. */
+    leftIcon: PropTypes.node
+  }),
+
   /** The label of the chip. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 

package/lib/components/Chip/Chip.stories.js

@@ -53,6 +53,34 @@ export default {
     }
   }
 };
+
+var VariableIcon = function VariableIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("g", {
+    clipPath: "url(#clip0_709_18965)"
+  }, ___EmotionJSX("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7.5",
+    fill: "white",
+    stroke: "#7AC7F2"
+  }), ___EmotionJSX("path", {
+    d: "M11.5042 4.25C12.0833 5.37917 12.3125 6.68333 12.1667 8C12.0833 9.31667 11.625 10.6208 10.8458 11.75L10.2083 11.3333C10.8792 10.3208 11.2708 9.16667 11.3333 8C11.475 6.83333 11.2875 5.67917 10.7917 4.66667L11.5042 4.25ZM5.15416 4.25L5.79166 4.66667C5.12083 5.67917 4.72916 6.83333 4.66666 8C4.525 9.16667 4.71666 10.3208 5.20833 11.3333L4.50416 11.75C3.92083 10.6208 3.6875 9.32083 3.83333 8C3.91666 6.68333 4.375 5.37917 5.15416 4.25ZM8.03333 7.45L9 6.10417H10.0542L8.47916 8.1875L9.39583 10.2375H8.45416L7.87916 8.83333L6.86666 10.2208H5.81666L7.44166 8.0875L6.55416 6.10417H7.5L8.03333 7.45Z",
+    fill: "#7AC7F2"
+  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: "clip0_709_18965"
+  }, ___EmotionJSX("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
+};
+
 export var Default = function Default(_ref5) {
   var args = _extends({}, _ref5);
 
@@ -121,4 +149,23 @@ export var ChipWithIcon = function ChipWithIcon() {
     "aria-hidden": "true",
     focusable: "false"
   })));
+};
+export var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
+  return ___EmotionJSX(Chip, {
+    label: "Chip with Icon Button and Left Slot",
+    bg: "white",
+    variant: "boxes.itemChipWithSlot",
+    slots: {
+      leftIcon: ___EmotionJSX(Icon, {
+        icon: VariableIcon,
+        size: 16
+      })
+    }
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "delete",
+    variant: "buttons.chipWithSlotDeleteButton"
+  }, ___EmotionJSX(Icon, {
+    icon: Clear,
+    size: 14
+  })));
 };

package/lib/components/Chip/Chip.test.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import Earth from 'mdi-react/EarthIcon';
 import Chip from '../Chip/Chip';
 import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
@@ -48,4 +50,17 @@ test('renders Chip component with custom alignment', function () {
   });
   expect(screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
   expect(screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
+});
+test('renders Chip component with left slot', function () {
+  var slots = {
+    leftIcon: ___EmotionJSX(Icon, {
+      icon: Earth,
+      size: 14,
+      "data-testid": "iconId"
+    })
+  };
+  getComponent({
+    slots: slots
+  });
+  expect(screen.getByTestId('iconId')).toBeInTheDocument();
 });

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -364,6 +364,27 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
+  var multivaluesFieldChip = function multivaluesFieldChip(item) {
+    return ___EmotionJSX(Chip, _extends({
+      key: item.key,
+      role: "presentation",
+      variant: "boxes.selectedItemChip",
+      bg: "active",
+      label: item.name,
+      slots: item.slots
+    }, item.chipProps), ___EmotionJSX(IconButton, _extends({
+      "aria-label": "delete",
+      onPress: function onPress() {
+        return deleteItem(item.key);
+      },
+      variant: "buttons.chipDeleteButton"
+    }, item.buttonProps), ___EmotionJSX(Icon, {
+      icon: Clear,
+      color: "white",
+      size: 14
+    })));
+  };
+
   var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context7 = _Array$from(selectionManager.selectedKeys)).call(_context7, function (key) {
     var _context8, _context9;
 
@@ -372,23 +393,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
 
     if (item) {
-      return ___EmotionJSX(Chip, {
-        key: item.key,
-        role: "presentation",
-        variant: "boxes.selectedItemChip",
-        bg: "active",
-        label: item.name
-      }, ___EmotionJSX(IconButton, {
-        "aria-label": "delete",
-        onPress: function onPress() {
-          return deleteItem(item.key);
-        },
-        variant: "buttons.chipDeleteButton"
-      }, ___EmotionJSX(Icon, {
-        icon: Clear,
-        color: "white",
-        size: 14
-      })));
+      return multivaluesFieldChip(item);
     }
 
     return null;