@pingux/astro 2.135.0-alpha.0 → 2.135.0-alpha.2

package/lib/components/ExpandableText/ExpandableText.test.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import ExpandableText from './ExpandableText';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+jest.mock('use-resize-observer', function () {
+  return jest.fn(function () {
+    return {
+      ref: jest.fn(),
+      // a stub ref callback
+      width: 300 // pretend container is 300px wide
+    };
+  });
+});
+
+var children = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+var testId = 'test-text';
+var defaultProps = {
+  'data-testid': testId,
+  //   children,
+  maxLines: 2
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+  return renderFn(___EmotionJSX(ExpandableText, _extends({}, defaultProps, props), children));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ExpandableText, _extends({}, defaultProps, props));
+  }
+});
+describe('ExpandableText', function () {
+  it('renders children', function () {
+    _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    _Object$defineProperty(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    fireEvent.click(button);
+    var expandableText = screen.getByText(children);
+    expect(expandableText).toBeInTheDocument();
+    expect(expandableText).toHaveAttribute('data-testid', testId);
+  });
+  it('expands and collapses text on button click', function () {
+    _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    _Object$defineProperty(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    fireEvent.click(screen.getByRole('button'));
+    expect(button).toHaveTextContent(/View More/i);
+  });
+  it('it rests the expansion state when resized', function () {
+    getComponent();
+    var button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    fireEvent(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+  it('truncates the text on resize when button is not expanded', function () {
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    fireEvent(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+});

package/lib/components/ExpandableText/index.js

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

package/lib/components/Input/Input.styles.js

@@ -134,6 +134,11 @@ input.fieldControlWrapper = (_input$fieldControlWr = {
       opacity: 0.5
     }
   },
+  '&.is-invalid': {
+    '&:after': {
+      bg: 'critical.bright'
+    }
+  },
   '&.is-read-only': {
     '> input': {
       backgroundColor: 'accent.95',

package/lib/components/TimeField/TimeField.js

@@ -47,19 +47,21 @@ var TimeField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTimeFieldState(_objectSpread(_objectSpread(_objectSpread({}, props), parsedTimes), {}, {
     locale: locale
   }));
-  var _useStatusClasses = useStatusClasses(className, {
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      is24Hour: props.hourCycle === 24
-    }),
-    classNames = _useStatusClasses.classNames;
   var _useTimeField = useTimeField(_objectSpread(_objectSpread({}, props), parsedTimes), state, fieldRef),
-    fieldProps = _useTimeField.fieldProps;
+    fieldProps = _useTimeField.fieldProps,
+    isInvalid = _useTimeField.isInvalid;
   var _useField = useField(_objectSpread(_objectSpread({}, others), {}, {
       value: (state === null || state === void 0 || (_state$value = state.value) === null || _state$value === void 0 ? void 0 : _state$value.toString()) || ''
     })),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldLabelProps = _useField.fieldLabelProps;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      isInvalid: isInvalid,
+      is24Hour: props.hourCycle === 24
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {

package/lib/components/TimeField/TimeField.stories.js

@@ -77,4 +77,19 @@ export var WithLabel = function WithLabel(args) {
     label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
+};
+export var Invalid = function Invalid() {
+  var _useState3 = useState('02:30'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var onChangeHandler = function onChangeHandler(value) {
+    return setTime(value.toString());
+  };
+  return ___EmotionJSX(TimeField, {
+    "aria-label": "timefield-default",
+    value: time,
+    onChange: onChangeHandler,
+    isInvalid: true
+  });
 };

package/lib/components/TimeField/TimeField.styles.js

@@ -24,6 +24,9 @@ var inputField = _objectSpread(_objectSpread({}, input), {}, {
   },
   '&.is-24-hour': {
     minWidth: '0px'
+  },
+  '&.is-invalid': {
+    borderColor: 'critical.bright'
   }
 });
 var segment = {

package/lib/components/TimeField/TimeField.test.js

@@ -90,6 +90,15 @@ test('renders TimeField component with isReadOnly', function () {
     expect(segment).toHaveAttribute('aria-readonly', 'true');
   });
 });
+test('renders TimeField component with isInvalid', function () {
+  getComponent({
+    isInvalid: true
+  });
+  var timeSegments = screen.getAllByRole('spinbutton');
+  _forEachInstanceProperty(timeSegments).call(timeSegments, function (segment) {
+    expect(segment).toHaveAttribute('aria-invalid', 'true');
+  });
+});
 test('should handle autofocus when deleting segments from left to right', function () {
   var defaultValue = new Time(12, 30);
   getComponent({

package/lib/index.js

@@ -80,6 +80,7 @@ export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
+export { default as ExpandableText } from './components/ExpandableText';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';

package/lib/styles/variants/variants.js

@@ -23,6 +23,7 @@ import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel
 import copyText from '../../components/CopyText/CopyText.styles';
 import dataTable from '../../components/DataTable/DataTable.styles';
 import environmentBreadcrumb from '../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles';
+import expandableText from '../../components/ExpandableText/ExpandableText.styles';
 import fieldHelperText from '../../components/FieldHelperText/FieldHelperText.styles';
 import footer from '../../components/Footer/Footer.styles';
 import gridList from '../../components/GridList/GridList.styles';
@@ -76,6 +77,7 @@ export default _objectSpread(_objectSpread({
   copyText: copyText,
   dataTable: dataTable,
   environmentBreadcrumb: environmentBreadcrumb,
+  expandableText: expandableText,
   fieldHelperText: fieldHelperText,
   footer: footer,
   gridList: gridList,

package/lib/types/expandableText.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -15,6 +15,7 @@ export * from './colorField';
 export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
+export * from './expandableText';
 export * from './fieldHelperText';
 export * from './footer';
 export * from './grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.135.0-alpha.0",
+  "version": "2.135.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",