@pingux/astro 1.17.0-alpha.8 → 1.18.0

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

@@ -35,7 +35,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
   component: _index.Button,
@@ -101,10 +101,15 @@ var TextIconButton = function TextIconButton() {
 exports.TextIconButton = TextIconButton;
 
 var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Button, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     mb: "sm",
+    mr: "auto",
     variant: "inline"
-  }, "Inline");
+  }, "Inline"), (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Inline primary"));
 };
 
 exports.InlineButton = InlineButton;

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

@@ -137,6 +137,11 @@ test('color block button renders in default state', function () {
 
   expect(button).toHaveClass('is-focused');
   expect(button).toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(button).not.toHaveClass('is-focused');
+  expect(button).not.toHaveFocus();
 });
 test('color block button renders in configured state', function () {
   getComponent({

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
+exports["default"] = exports.Default = exports.Count = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -30,6 +30,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Box = _interopRequireDefault(require("../Box"));
+
 var _colors = require("../../styles/colors.js");
 
 var _react2 = require("@emotion/react");
@@ -88,6 +90,21 @@ var Default = function Default(_ref5) {
 
 exports.Default = Default;
 
+var Count = function Count(_ref6) {
+  var args = (0, _extends2["default"])({}, _ref6);
+  return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+    color: "white"
+  }, args, {
+    label: "1",
+    variant: "boxes.chipCount"
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({}, args, {
+    label: "1",
+    variant: "boxes.countNeutral"
+  })));
+};
+
+exports.Count = Count;
+
 var ChipWithCustomColors = function ChipWithCustomColors() {
   return (0, _react2.jsx)(_Chip["default"], {
     label: "Custom Colors",

package/lib/cjs/components/Link/Link.test.js

@@ -65,6 +65,11 @@ test('link shows focus status', function () {
 
   expect(link).toHaveFocus();
   expect(link).toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(link).not.toHaveFocus();
+  expect(link).not.toHaveClass('is-focused');
 });
 test('link shows disabled status', function () {
   // Needs href to have a tabindex

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

@@ -134,6 +134,23 @@ var chip = {
 };
 exports.chip = chip;
 
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  height: '17px'
+});
+
+var chipCount = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, chipCount), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20'
+  }
+});
+
 var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -336,6 +353,8 @@ var _default = {
   base: base,
   card: card,
   chip: chip,
+  chipCount: chipCount,
+  countNeutral: countNeutral,
   selectedItemChip: selectedItemChip,
   readOnlyChip: readOnlyChip,
   copy: copy,

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

@@ -391,6 +391,18 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
 var text = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -490,9 +502,7 @@ var colorField = {
   '&:focus-visible': {
     outline: 'none'
   },
-  '&.is-focused': {
-    borderColor: 'accent.80'
-  }
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 
 var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
@@ -717,6 +727,7 @@ var _default = {
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
+  inlinePrimary: inlinePrimary,
   inverted: inverted,
   link: link,
   primary: primary,

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

@@ -14,7 +14,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
 export default {
   title: 'Button',
   component: Button,
@@ -69,10 +69,15 @@ export var TextIconButton = function TextIconButton() {
   }), "Add a Form"));
 };
 export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Button, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
     mb: "sm",
+    mr: "auto",
     variant: "inline"
-  }, "Inline");
+  }, "Inline"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Inline primary"));
 };
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls

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

@@ -100,6 +100,9 @@ test('color block button renders in default state', function () {
   userEvent.tab();
   expect(button).toHaveClass('is-focused');
   expect(button).toHaveFocus();
+  userEvent.tab();
+  expect(button).not.toHaveClass('is-focused');
+  expect(button).not.toHaveFocus();
 });
 test('color block button renders in configured state', function () {
   getComponent({

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

@@ -8,6 +8,7 @@ import Earth from 'mdi-react/EarthIcon';
 import Chip from '../Chip';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
+import Box from '../Box';
 import { flatColorList } from '../../styles/colors.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -60,6 +61,19 @@ export var Default = function Default(_ref5) {
     color: "white"
   }, args));
 };
+export var Count = function Count(_ref6) {
+  var args = _extends({}, _ref6);
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Chip, _extends({
+    color: "white"
+  }, args, {
+    label: "1",
+    variant: "boxes.chipCount"
+  })), ___EmotionJSX("br", null), ___EmotionJSX(Chip, _extends({}, args, {
+    label: "1",
+    variant: "boxes.countNeutral"
+  })));
+};
 export var ChipWithCustomColors = function ChipWithCustomColors() {
   return ___EmotionJSX(Chip, {
     label: "Custom Colors",

package/lib/components/Link/Link.test.js

@@ -43,6 +43,9 @@ test('link shows focus status', function () {
   userEvent.tab();
   expect(link).toHaveFocus();
   expect(link).toHaveClass('is-focused');
+  userEvent.tab();
+  expect(link).not.toHaveFocus();
+  expect(link).not.toHaveClass('is-focused');
 });
 test('link shows disabled status', function () {
   // Needs href to have a tabindex

package/lib/styles/variants/boxes.js

@@ -114,6 +114,23 @@ export var chip = {
   }
 };
 
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  height: '17px'
+});
+
+var chipCount = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, chipCount), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20'
+  }
+});
+
 var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -316,6 +333,8 @@ export default {
   base: base,
   card: card,
   chip: chip,
+  chipCount: chipCount,
+  countNeutral: countNeutral,
   selectedItemChip: selectedItemChip,
   readOnlyChip: readOnlyChip,
   copy: copy,

package/lib/styles/variants/buttons.js

@@ -371,6 +371,18 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
 var text = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -470,9 +482,7 @@ var colorField = {
   '&:focus-visible': {
     outline: 'none'
   },
-  '&.is-focused': {
-    borderColor: 'accent.80'
-  }
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 
 var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
@@ -697,6 +707,7 @@ export default {
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
+  inlinePrimary: inlinePrimary,
   inverted: inverted,
   link: link,
   primary: primary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.17.0-alpha.8",
+  "version": "1.18.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",