@pingux/astro 1.2.0-alpha.4 → 1.2.0-alpha.8

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

@@ -8,12 +8,18 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+exports.ColorBlockButton = exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
 
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _ = _interopRequireDefault(require("."));
@@ -56,6 +62,13 @@ var _default = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -110,4 +123,32 @@ var InlineButton = function InlineButton() {
   }, "Inline");
 };
 
-exports.InlineButton = InlineButton;
+exports.InlineButton = InlineButton;
+
+var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = (0, _objectWithoutProperties2["default"])(args, ["isConfigured"]);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_Text["default"], {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_Icon["default"], {
+    icon: _CreateIcon["default"]
+  }));
+};
+
+exports.ColorBlockButton = ColorBlockButton;
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
+};

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

@@ -122,4 +122,30 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+
+  _userEvent["default"].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 = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -18,8 +18,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _HelpIcon = _interopRequireDefault(require("mdi-react/HelpIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -30,20 +28,40 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _react2 = require("@emotion/react");
 
+var HelpIcon = function HelpIcon() {
+  return (0, _react2.jsx)("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+/**
+ * A `HelpHint` is a composed component using tooltip trigger and icon button.
+ *
+ * For customization the trigger icon,
+ * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
+ */
+
+
 var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       tooltipProps = props.tooltipProps,
       iconButtonProps = props.iconButtonProps,
       others = (0, _objectWithoutProperties2["default"])(props, ["children", "tooltipProps", "iconButtonProps"]);
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
-    ref: ref
-  }, others), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
-    icon: _HelpIcon["default"],
-    size: "11px"
+    icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {

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

@@ -0,0 +1,57 @@
+"use strict";
+
+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.WithTooltipAndIconButtonProps = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'HelpHint',
+  component: _["default"],
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], args));
+};
+
+exports.Default = Default;
+
+var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};
+
+exports.WithTooltipAndIconButtonProps = WithTooltipAndIconButtonProps;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _HelpHint = _interopRequireDefault(require("./HelpHint"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_HelpHint["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _testWrapper.fireEvent.mouseMove(helpHintButton);
+
+  _testWrapper.fireEvent.mouseEnter(helpHintButton);
+
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _userEvent["default"].tab();
+
+  expect(helpHintButton).toHaveFocus();
+  expect(_testWrapper.screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(_testWrapper.screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

package/lib/cjs/components/NumberField/NumberField.js

@@ -50,6 +50,8 @@ var _i18n = require("@react-aria/i18n");
 
 var _utils = require("@react-aria/utils");
 
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _index = require("../../index");
@@ -130,7 +132,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, inputProps)), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  }, fieldControlProps, (0, _omit["default"])(inputProps, 'name'))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
     status: status
   }, helperText)));
 });

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

@@ -169,4 +169,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
   _userEvent["default"].tab();
 
   expect(_testWrapper.screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});
+test('number field input receiving name attribute', function () {
+  var testName = 'testName';
+  getComponent({
+    name: testName
+  });
+  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
 });

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'
   },
@@ -556,6 +561,58 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+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,
@@ -595,6 +652,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

@@ -178,6 +178,20 @@ 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',

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

@@ -1,5 +1,8 @@
+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 CreateIcon from 'mdi-react/CreateIcon';
 import Box from '../Box';
 import Button from '.';
 import Icon from '../Icon';
@@ -36,6 +39,13 @@ export default {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 export var Default = function Default(args) {
@@ -74,4 +84,30 @@ 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
+    }
+  }
 };

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/HelpHint/HelpHint.js

@@ -1,12 +1,32 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
-import HelpIcon from 'mdi-react/HelpIcon';
 import PropTypes from 'prop-types';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var HelpIcon = function HelpIcon() {
+  return ___EmotionJSX("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+/**
+ * A `HelpHint` is a composed component using tooltip trigger and icon button.
+ *
+ * For customization the trigger icon,
+ * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
+ */
+
+
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       tooltipProps = props.tooltipProps,
@@ -14,14 +34,14 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       others = _objectWithoutProperties(props, ["children", "tooltipProps", "iconButtonProps"]);
 
   return ___EmotionJSX(TooltipTrigger, _extends({
-    ref: ref
-  }, others), ___EmotionJSX(IconButton, _extends({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), ___EmotionJSX(Icon, {
-    icon: HelpIcon,
-    size: "11px"
+    icon: HelpIcon
   })), ___EmotionJSX(Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {

package/lib/components/HelpHint/HelpHint.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import HelpHint from '.';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'HelpHint',
+  component: HelpHint,
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, args));
+};
+export var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};

package/lib/components/HelpHint/HelpHint.test.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import axeTest from '../../utils/testUtils/testAxe';
+import HelpHint from './HelpHint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(HelpHint, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(helpHintButton).toHaveFocus();
+  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

package/lib/components/NumberField/NumberField.js

@@ -22,6 +22,7 @@ import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
+import omit from 'lodash/omit';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../index';
 import { useField, usePropWarning } from '../../hooks';
@@ -94,7 +95,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, inputProps)), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/components/NumberField/NumberField.test.js

@@ -128,4 +128,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
   expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
   userEvent.tab();
   expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});
+test('number field input receiving name attribute', function () {
+  var testName = 'testName';
+  getComponent({
+    name: testName
+  });
+  expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
 });

package/lib/styles/variants/buttons.js

@@ -295,6 +295,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'
   },
@@ -534,6 +539,58 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+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'
+  }
+};
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -573,5 +630,6 @@ export default {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };

package/lib/styles/variants/text.js

@@ -158,6 +158,20 @@ export 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',

package/package.json

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