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

package/lib/cjs/components/ExpandableText/ExpandableText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ExpandableTextProps } from '../../types';
+declare const ExpandableText: React.ForwardRefExoticComponent<ExpandableTextProps & React.RefAttributes<HTMLDivElement>>;
+export default ExpandableText;

package/lib/cjs/components/ExpandableText/ExpandableText.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@react-aria/utils");
+var _uuid = require("uuid");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "maxLines", "buttonProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ExpandableText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    maxLines = props.maxLines,
+    buttonProps = props.buttonProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var textContent = typeof children === 'string' ? children : '';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isTruncated = _useState4[0],
+    setIsTruncated = _useState4[1];
+  var _useState5 = (0, _react.useState)(textContent),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    visibleText = _useState6[0],
+    setVisibleText = _useState6[1];
+  var containerRef = (0, _react.useRef)(null);
+  var hiddenContainerRef = (0, _react.useRef)(null);
+  var prevWidthRef = (0, _react.useRef)(window.innerWidth);
+  var truncateToLines = function truncateToLines() {
+    var _containerRef$current;
+    // get line height and calculate the number of lines
+    var container = hiddenContainerRef.current;
+    if (!container) return 0;
+    container.style.width = "".concat(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) || 0, "px");
+    container.innerText = textContent;
+    var lineHeight = (0, _parseFloat2["default"])(getComputedStyle(container).lineHeight);
+    var fullTextLines = Math.round(container.offsetHeight / lineHeight);
+    if (fullTextLines <= maxLines) {
+      setVisibleText(textContent);
+      setIsTruncated(false);
+      return undefined;
+    }
+
+    // using binary search to find the maximum text that fits within maxLines
+    var suffix = '... View More';
+    var start = 0;
+    var end = textContent.length;
+    var truncatedText = '';
+    while (start < end) {
+      var _context, _context2;
+      var mid = Math.floor((start + end) / 2);
+      var candidateText = (0, _trim["default"])(_context = (0, _slice["default"])(textContent).call(textContent, 0, mid)).call(_context);
+      var candidate = (0, _concat["default"])(_context2 = "".concat(candidateText)).call(_context2, suffix);
+      container.innerText = candidate;
+      var lines = Math.round(container.offsetHeight / lineHeight);
+      if (lines <= maxLines) {
+        truncatedText = candidateText;
+        start = mid + 1;
+      } else {
+        end = mid;
+      }
+    }
+    setVisibleText("".concat(truncatedText, "...") || textContent);
+    setIsTruncated(true);
+    return undefined;
+  };
+  var onResize = (0, _react.useCallback)(function () {
+    if (!isExpanded) {
+      truncateToLines();
+    }
+    // Reset the expansion state if the width has changed
+    if (window.innerWidth !== prevWidthRef.current) {
+      prevWidthRef.current = window.innerWidth;
+      setIsExpanded(false);
+    }
+  }, [isExpanded]);
+  (0, _utils.useResizeObserver)({
+    ref: containerRef,
+    onResize: onResize
+  });
+
+  /* istanbul ignore next */
+  (0, _utils.useLayoutEffect)(function () {
+    if (isExpanded) {
+      setVisibleText(textContent);
+    } else {
+      truncateToLines();
+    }
+  }, [isExpanded, textContent]);
+  var toggleExpanded = function toggleExpanded() {
+    return setIsExpanded(!isExpanded);
+  };
+  var textId = (0, _uuid.v4)();
+  return (0, _react2.jsx)(_index.Box, {
+    ref: ref
+  }, (0, _react2.jsx)("div", {
+    ref: containerRef
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
+    variant: "variants.expandableText.text",
+    id: textId
+  }, others), visibleText, ' '), isTruncated && (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    onPress: toggleExpanded,
+    "aria-expanded": isExpanded,
+    "aria-controls": textId,
+    variant: "link",
+    sx: {
+      display: 'inline-block',
+      whiteSpace: 'nowrap',
+      ml: 1
+    }
+  }, buttonProps), isExpanded ? 'View Less' : 'View More')), (0, _react2.jsx)(_index.Box, {
+    ref: hiddenContainerRef,
+    variant: "expandableText.hiddenContainer"
+  }));
+});
+var _default = ExpandableText;
+exports["default"] = _default;

package/lib/cjs/components/ExpandableText/ExpandableText.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ExpandableText/ExpandableText" />
+
+# ExpandableText
+
+ExpandableText  is used to manage long texts by truncating them based on max lines. 
+It allows collapse and expand the text to view in full.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence. |
+
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The button uses, **`aria-controls`** which references the iD of the collapsible region.

package/lib/cjs/components/ExpandableText/ExpandableText.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ExpandableTextProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ExpandableTextProps>;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/ ExpandableText',
+  component: _index.ExpandableText,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ExpandableText["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    },
+    codesandbox: false
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.ExpandableText, {
+    maxLines: 5,
+    "data-testid": "test-field"
+  }, "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.");
+};
+exports.Default = Default;

package/lib/cjs/components/ExpandableText/ExpandableText.styles.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    text: {
+        display: string;
+    };
+    hiddenContainer: {
+        visibility: string;
+        position: string;
+        p: number;
+        m: number;
+        border: number;
+        whiteSpace: string;
+        wordBreak: string;
+    };
+};
+export default _default;

package/lib/cjs/components/ExpandableText/ExpandableText.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var text = {
+  display: 'inline'
+};
+var hiddenContainer = {
+  visibility: 'hidden',
+  position: 'absolute',
+  p: 0,
+  m: 0,
+  border: 0,
+  whiteSpace: 'normal',
+  wordBreak: 'break-word'
+};
+var _default = {
+  text: text,
+  hiddenContainer: hiddenContainer
+};
+exports["default"] = _default;

package/lib/cjs/components/ExpandableText/ExpandableText.test.d.ts

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

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText"));
+var _react3 = require("@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 ? _testWrapper.render : _ref$renderFn;
+  return renderFn((0, _react3.jsx)(_ExpandableText["default"], (0, _extends2["default"])({}, defaultProps, props), children));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_ExpandableText["default"], (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
+describe('ExpandableText', function () {
+  it('renders children', function () {
+    (0, _defineProperty["default"])(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;
+      }
+    });
+    (0, _defineProperty["default"])(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    _react2.fireEvent.click(button);
+    var expandableText = _testWrapper.screen.getByText(children);
+    expect(expandableText).toBeInTheDocument();
+    expect(expandableText).toHaveAttribute('data-testid', testId);
+  });
+  it('expands and collapses text on button click', function () {
+    (0, _defineProperty["default"])(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;
+      }
+    });
+    (0, _defineProperty["default"])(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    _react2.fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    _react2.fireEvent.click(_testWrapper.screen.getByRole('button'));
+    expect(button).toHaveTextContent(/View More/i);
+  });
+  it('it rests the expansion state when resized', function () {
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    _react2.fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    (0, _react2.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 = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    (0, _react2.fireEvent)(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+});

package/lib/cjs/components/ExpandableText/index.d.ts

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

package/lib/cjs/components/ExpandableText/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableText["default"];
+  }
+});
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText"));

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

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

package/lib/cjs/components/TimeField/TimeField.js

@@ -59,19 +59,21 @@ var TimeField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _datepicker2.useTimeFieldState)(_objectSpread(_objectSpread(_objectSpread({}, props), parsedTimes), {}, {
     locale: locale
   }));
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      is24Hour: props.hourCycle === 24
-    }),
-    classNames = _useStatusClasses.classNames;
   var _useTimeField = (0, _datepicker.useTimeField)(_objectSpread(_objectSpread({}, props), parsedTimes), state, fieldRef),
-    fieldProps = _useTimeField.fieldProps;
+    fieldProps = _useTimeField.fieldProps,
+    isInvalid = _useTimeField.isInvalid;
   var _useField = (0, _hooks.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 = (0, _hooks.useStatusClasses)(className, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      isInvalid: isInvalid,
+      is24Hour: props.hourCycle === 24
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {

package/lib/cjs/components/TimeField/TimeField.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Disabled: StoryFn<TimeFieldProps>;
 export declare const ReadOnly: StoryFn<TimeFieldProps>;
 export declare const Required: StoryFn<TimeFieldProps>;
 export declare const WithLabel: StoryFn<TimeFieldProps>;
+export declare const Invalid: StoryFn<TimeFieldProps>;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLabel = exports.Required = exports.ReadOnly = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithLabel = exports.Required = exports.ReadOnly = exports.Invalid = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -98,4 +98,20 @@ var WithLabel = function WithLabel(args) {
     "aria-label": "timefield-default"
   }));
 };
-exports.WithLabel = WithLabel;
+exports.WithLabel = WithLabel;
+var Invalid = function Invalid() {
+  var _useState3 = (0, _react.useState)('02:30'),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var onChangeHandler = function onChangeHandler(value) {
+    return setTime(value.toString());
+  };
+  return (0, _react2.jsx)(_index.TimeField, {
+    "aria-label": "timefield-default",
+    value: time,
+    onChange: onChangeHandler,
+    isInvalid: true
+  });
+};
+exports.Invalid = Invalid;

package/lib/cjs/components/TimeField/TimeField.styles.d.ts

@@ -19,6 +19,9 @@ declare const _default: {
         '&.is-24-hour': {
             minWidth: string;
         };
+        '&.is-invalid': {
+            borderColor: string;
+        };
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;

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

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

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

@@ -93,6 +93,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 = _testWrapper.screen.getAllByRole('spinbutton');
+  (0, _forEach["default"])(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 _date.Time(12, 30);
   getComponent({

package/lib/cjs/index.d.ts

@@ -76,6 +76,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/cjs/index.js

@@ -67,6 +67,7 @@ var _exportNames = {
   DateField: true,
   EditButton: true,
   EnvironmentBreadcrumb: true,
+  ExpandableText: true,
   FieldHelperText: true,
   FileInputField: true,
   Footer: true,
@@ -455,6 +456,12 @@ _Object$defineProperty(exports, "ErrorCalloutBadge", {
     return _ErrorCalloutBadge["default"];
   }
 });
+_Object$defineProperty(exports, "ExpandableText", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableText["default"];
+  }
+});
 _Object$defineProperty(exports, "FieldHelperText", {
   enumerable: true,
   get: function get() {
@@ -1439,6 +1446,7 @@ var _DatePicker = _interopRequireDefault(require("./components/DatePicker"));
 var _DateField = _interopRequireDefault(require("./components/DatePicker/DateField"));
 var _EditButton = _interopRequireDefault(require("./components/EditButton"));
 var _EnvironmentBreadcrumb = _interopRequireDefault(require("./components/EnvironmentBreadcrumb"));
+var _ExpandableText = _interopRequireDefault(require("./components/ExpandableText"));
 var _FieldHelperText = _interopRequireWildcard(require("./components/FieldHelperText"));
 _forEachInstanceProperty(_context24 = _Object$keys(_FieldHelperText)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -30,6 +30,7 @@ var _CollapsiblePanel = _interopRequireDefault(require("../../components/Collaps
 var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
 var _DataTable = _interopRequireDefault(require("../../components/DataTable/DataTable.styles"));
 var _EnvironmentalBreadcrumb = _interopRequireDefault(require("../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles"));
+var _ExpandableText = _interopRequireDefault(require("../../components/ExpandableText/ExpandableText.styles"));
 var _FieldHelperText = _interopRequireDefault(require("../../components/FieldHelperText/FieldHelperText.styles"));
 var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.styles"));
 var _GridList = _interopRequireDefault(require("../../components/GridList/GridList.styles"));
@@ -87,6 +88,7 @@ var _default = _objectSpread(_objectSpread({
   copyText: _CopyText["default"],
   dataTable: _DataTable["default"],
   environmentBreadcrumb: _EnvironmentalBreadcrumb["default"],
+  expandableText: _ExpandableText["default"],
   fieldHelperText: _FieldHelperText["default"],
   footer: _Footer["default"],
   gridList: _GridList["default"],

package/lib/cjs/types/expandableText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TestingAttributes } from './shared/test';
+import { ButtonProps } from './button';
+import { TextProps } from './text';
+export interface ExpandableTextProps extends TestingAttributes, TextProps {
+    maxLines: number;
+    className?: string;
+    children?: React.ReactNode;
+    buttonProps?: ButtonProps;
+}

package/lib/cjs/types/expandableText.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -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';