@pingux/astro 1.12.0-alpha.4 → 1.13.0-alpha.1

package/lib/components/IconButtonToggle/IconButtonToggle.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import { useComponentToggle } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconButtonToggle = function IconButtonToggle(props) {
+  var toggledIcon = props.toggledIcon,
+      defaultIcon = props.defaultIcon,
+      buttonProps = props.buttonProps,
+      iconProps = props.iconProps,
+      isToggled = props.isToggled,
+      onToggle = props.onToggle,
+      title = props.title;
+  var conditionalRenderProps = {
+    ComponentToRenderIfTrue: toggledIcon,
+    ComponentToRenderIfFalse: defaultIcon,
+    condition: isToggled,
+    onConditionChange: onToggle
+  };
+
+  var _useComponentToggle = useComponentToggle(conditionalRenderProps),
+      handleConditionChange = _useComponentToggle.handleConditionChange,
+      RenderedComponent = _useComponentToggle.RenderedComponent;
+
+  return ___EmotionJSX(IconButton, _extends({
+    onPress: handleConditionChange
+  }, buttonProps, {
+    title: title
+  }), ___EmotionJSX(Icon, _extends({
+    icon: RenderedComponent
+  }, iconProps)));
+};
+
+IconButtonToggle.propTypes = {
+  /** Props object that is spread into the icon element. */
+  iconProps: PropTypes.shape({}),
+
+  /** Props object that is spread into the button element. */
+  buttonProps: PropTypes.shape({}),
+
+  /** The icon that will render by default. */
+  defaultIcon: PropTypes.elementType.isRequired,
+
+  /** The icon that will render after toggling the icon. */
+  toggledIcon: PropTypes.elementType.isRequired,
+
+  /** Whether or not the icon is toggled. (use only when controlled) */
+  isToggled: PropTypes.bool,
+
+  /** Function that is passed into the IconButton within this component. */
+  onToggle: PropTypes.func,
+
+  /** Content will be displayed in a tooltip on hover or focus. */
+  title: PropTypes.string
+};
+export default IconButtonToggle;

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import IconButtonToggle from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'IconButtonToggle',
+  component: IconButtonToggle
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(IconButtonToggle, _extends({}, args, {
+    toggledIcon: EyeIcon,
+    defaultIcon: EyeOffIcon,
+    buttonProps: {
+      'aria-label': 'eye icon'
+    }
+  }));
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isToggled = _useState2[0],
+      onToggledChange = _useState2[1];
+
+  var handleToggleChange = function handleToggleChange() {
+    onToggledChange(!isToggled);
+  };
+
+  return ___EmotionJSX(IconButtonToggle, _extends({}, args, {
+    toggledIcon: EyeIcon,
+    defaultIcon: EyeOffIcon,
+    onToggle: handleToggleChange,
+    isToggled: isToggled,
+    buttonProps: {
+      'aria-label': 'eye icon'
+    }
+  }));
+};

package/lib/components/IconButtonToggle/IconButtonToggle.test.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import IconButtonToggle from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var iconTestId = 'test-icon';
+
+var OnIcon = function OnIcon(props) {
+  return ___EmotionJSX(EyeIcon, _extends({
+    "data-testid": iconTestId
+  }, props));
+};
+
+var OffIcon = function OffIcon(props) {
+  return ___EmotionJSX(EyeOffIcon, _extends({
+    "data-testid": iconTestId
+  }, props));
+};
+
+var testId = 'test-button';
+var defaultProps = {
+  buttonProps: {
+    'data-testid': testId,
+    'aria-label': 'Eye'
+  },
+  defaultIcon: OffIcon,
+  toggledIcon: OnIcon
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconButtonToggle, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default icon button', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('data-testid', testId);
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+});

package/lib/components/IconButtonToggle/index.js

@@ -0,0 +1 @@
+export { default } from './IconButtonToggle';

package/lib/hooks/index.js

@@ -6,6 +6,8 @@ export { default as useLabelHeight } from './useLabelHeight';
 export { default as useModalState } from './useModalState';
 export { default as useOverlayPanelState } from './useOverlayPanelState';
 export { default as usePropWarning } from './usePropWarning';
+export { default as useProgressiveState } from './useProgressiveState';
+export { default as useComponentToggle } from './useComponentToggle';
 export { default as useNavBarPress } from './useNavBarPress';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';

package/lib/hooks/useComponentToggle/index.js

@@ -0,0 +1 @@
+export { default } from './useComponentToggle';

package/lib/hooks/useComponentToggle/useComponentToggle.js

@@ -0,0 +1,55 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useProgressiveState } from '../index';
+/**
+ * Returns one of two components that are supplied via props.
+ * A boolean value is used to determine which component to render.
+ * State can be handled by either props or within this hook if props are not provided.
+ * Also returns a function that inverts the boolean attribute, and calls a callback function.
+ * @param {Object} [props] Properties provided to the state
+ * @param {Boolean} [props.condition] Boolean that controls which component is returned.
+ * @param {Component} [props.ComponentToRenderIfTrue]
+ * Component that is returned when the condition is true.
+ * @param {Component} [props.ComponentToRenderIfFalse]
+ * Component that is returned when the condition is false.
+ * @param {Function} [props.onConditionChange]
+ * Callback function that is called, when the condition boolean changes, if it is provided .
+ * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
+ * @returns {Object} `{ handleCondtionChange: Function, renderedComponent: Component, }`
+ */
+
+var useComponentToggle = function useComponentToggle() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ComponentToRenderIfTrue = props.ComponentToRenderIfTrue,
+      ComponentToRenderIfFalse = props.ComponentToRenderIfFalse,
+      condition = props.condition,
+      onConditionChange = props.onConditionChange;
+
+  var _useProgressiveState = useProgressiveState(condition, function () {}),
+      _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+      isToggled = _useProgressiveState2[0],
+      setIsToggled = _useProgressiveState2[1];
+
+  var RenderedComponent = isToggled ? ComponentToRenderIfTrue : ComponentToRenderIfFalse;
+
+  var handleConditionChange = function handleConditionChange() {
+    setIsToggled(!isToggled);
+
+    if (onConditionChange) {
+      var _context;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      onConditionChange.apply(void 0, _concatInstanceProperty(_context = [!isToggled]).call(_context, args));
+    }
+  };
+
+  return {
+    handleConditionChange: handleConditionChange,
+    RenderedComponent: RenderedComponent
+  };
+};
+
+export default useComponentToggle;

package/lib/hooks/useComponentToggle/useComponentToggle.test.js

@@ -0,0 +1,105 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import useComponentToggle from './useComponentToggle';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var callback = jest.fn();
+var condition = false;
+var defaultProps = {
+  condition: condition,
+  onConditionChange: callback,
+  ComponentToRenderIfTrue: 'true-string',
+  ComponentToRenderIfFalse: 'false-string'
+};
+
+var TestComponent = function TestComponent() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisCondition = _useState2[0],
+      setCondition = _useState2[1];
+
+  var conditionalRenderProps = {
+    condition: thisCondition,
+    onConditionChange: setCondition,
+    ComponentToRenderIfTrue: 'true-string',
+    ComponentToRenderIfFalse: 'false-string',
+    onConditionChangeProp: callback
+  };
+
+  var _useComponentToggle = useComponentToggle(conditionalRenderProps),
+      handleConditionChange = _useComponentToggle.handleConditionChange,
+      RenderedComponent = _useComponentToggle.RenderedComponent;
+
+  return ___EmotionJSX("button", {
+    "data-testid": "test-div",
+    onClick: handleConditionChange,
+    onKeyDown: handleConditionChange
+  }, RenderedComponent);
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(TestComponent, _extends({}, props, defaultProps)));
+};
+
+test('default useField', function () {
+  renderHook(function () {
+    return useComponentToggle();
+  });
+});
+test('callback function should call, if provided', function () {
+  var _renderHook = renderHook(function () {
+    return useComponentToggle(defaultProps);
+  }),
+      result = _renderHook.result;
+
+  act(function () {
+    return result.current.handleConditionChange();
+  });
+  expect(callback).toHaveBeenCalled();
+});
+test('expect hook to return correct data shape', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _renderHook2, result, _result$current, handleConditionChange, RenderedComponent;
+
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _renderHook2 = renderHook(function () {
+            return useComponentToggle(defaultProps);
+          }), result = _renderHook2.result;
+          _result$current = result.current, handleConditionChange = _result$current.handleConditionChange, RenderedComponent = _result$current.RenderedComponent;
+          expect(handleConditionChange).toEqual(expect.any(Function));
+          expect(RenderedComponent).toEqual('false-string');
+
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('expect conditional toggling to work', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var component;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          component = screen.getByTestId('test-div');
+          expect(component).toHaveTextContent('false-string');
+          userEvent.click(component);
+          expect(component).toHaveTextContent('true-string');
+
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));

package/lib/index.js

@@ -43,6 +43,8 @@ export { default as Icon } from './components/Icon';
 export * from './components/Icon';
 export { default as IconButton } from './components/IconButton';
 export * from './components/IconButton';
+export { default as IconButtonToggle } from './components/IconButtonToggle';
+export * from './components/IconButtonToggle';
 export { default as Image } from './components/Image';
 export * from './components/Image';
 export { default as ImageUploadField } from './components/ImageUploadField';

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import CogsIcon from 'mdi-react/CogsIcon';
+import Box from '../components/Box';
+import { Icon, ComboBoxField, Item, IconButton, IconButtonToggle } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/OneWayToBidirectionalArrow'
+};
+var items = [{
+  name: 'Last Name',
+  id: '1'
+}, {
+  name: 'First Name',
+  id: '2'
+}, {
+  name: 'Third Option',
+  id: '3'
+}];
+export var Default = function Default() {
+  var CustomOnSvg = function CustomOnSvg() {
+    return ___EmotionJSX("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, ___EmotionJSX("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+      fill: "#CACED3"
+    }), ___EmotionJSX("path", {
+      d: "M9.83325 10.6251V6.37511H15.4999V2.94678L21.0533 8.50011L15.4999 14.0534V10.6251H9.83325Z",
+      fill: "#4462ED"
+    }), ___EmotionJSX("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10ZM22 8.5L16 3V6H10V11H16V14L22 8.5Z",
+      fill: "#515F6B"
+    }));
+  };
+
+  var CustomOffSvg = function CustomOffSvg() {
+    return ___EmotionJSX("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, ___EmotionJSX("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+      fill: "#CACED3"
+    }), ___EmotionJSX("path", {
+      d: "M9.83331 10.6251V6.37511H15.5V2.94678L21.0533 8.50011L15.5 14.0534V10.6251H9.83331Z",
+      fill: "#4462ED"
+    }));
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      alignItems: 'center'
+    },
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 25,
+    color: "neutral.50"
+  }), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    sx: {
+      ml: '5px',
+      mr: '5px',
+      flexShrink: 0
+    }
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: CustomOnSvg,
+    defaultIcon: CustomOffSvg,
+    title: "Bidirectional/ Outbound toggle",
+    iconProps: {
+      size: 20
+    },
+    buttonProps: {
+      variant: 'svgIconButton'
+    }
+  })), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
+  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+    icon: CogsIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "edit icon"
+  })), ___EmotionJSX(IconButton, {
+    ml: "5px"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "delete icon"
+  }))));
+};

package/lib/styles/variants/buttons.js

@@ -116,6 +116,12 @@ var iconButton = {
   }
 };
 
+var svgIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  path: {
+    fill: 'default'
+  }
+});
+
 var square = _objectSpread(_objectSpread({}, iconButton), {}, {
   borderRadius: '2px'
 });
@@ -701,5 +707,6 @@ export default {
   colorBlock: colorBlock,
   menuTab: menuTab,
   collapsiblePanelToggle: collapsiblePanelToggle,
-  neutralText: neutralText
+  neutralText: neutralText,
+  svgIconButton: svgIconButton
 };

package/package.json

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