box-ui-elements 16.0.0-beta.8 → 16.0.0

package/es/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js.flow

@@ -1,16 +1,25 @@
 // @flow
 import * as React from 'react';
 import noop from 'lodash/noop';
-import LoadingIndicator from '../../../../../components/loading-indicator';
+import { FormattedMessage } from 'react-intl';
+import CollapsableMessage from './CollapsableMessage';
 import formatTaggedMessage from '../../utils/formatTaggedMessage';
+import LoadingIndicator from '../../../../../components/loading-indicator';
+import messages from './messages';
 import ShowOriginalButton from './ShowOriginalButton';
 import TranslateButton from './TranslateButton';
+import { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';
+
 import type { GetProfileUrlCallback } from '../../../../common/flowTypes';
+import type { FeatureConfig } from '../../../../common/feature-checking';
+
 import './ActivityMessage.scss';
 
 type Props = {
+    features: FeatureConfig,
     getUserProfileUrl?: GetProfileUrlCallback,
     id: string,
+    isEdited?: boolean,
     onTranslate?: Function,
     tagged_message: string,
     translatedTaggedMessage?: string,
@@ -25,6 +34,7 @@ type State = {
 
 class ActivityMessage extends React.Component<Props, State> {
     static defaultProps = {
+        isEdited: false,
         translationEnabled: false,
     };
 
@@ -74,21 +84,41 @@ class ActivityMessage extends React.Component<Props, State> {
     };
 
     render(): React.Node {
-        const { id, tagged_message, translatedTaggedMessage, translationEnabled, getUserProfileUrl } = this.props;
+        const {
+            features,
+            getUserProfileUrl,
+            id,
+            isEdited,
+            tagged_message,
+            translatedTaggedMessage,
+            translationEnabled,
+        } = this.props;
         const { isLoading, isTranslation } = this.state;
         const commentToDisplay =
             translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;
+        const MessageWrapper = isFeatureEnabled(features, 'activityFeed.collapsableMessages.enabled')
+            ? CollapsableMessage
+            : React.Fragment;
+
         return isLoading ? (
             <div className="bcs-ActivityMessageLoading">
                 <LoadingIndicator size="small" />
             </div>
         ) : (
             <div className="bcs-ActivityMessage">
-                {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}
+                <MessageWrapper>
+                    {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}
+                    {isEdited && (
+                        <span className="bcs-ActivityMessage-edited">
+                            <FormattedMessage {...messages.activityMessageEdited} />
+                        </span>
+                    )}
+                </MessageWrapper>
                 {translationEnabled ? this.getButton(isTranslation) : null}
             </div>
         );
     }
 }
 
-export default ActivityMessage;
+export { ActivityMessage };
+export default withFeatureConsumer(ActivityMessage);

package/es/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js"],"names":["React","noop","LoadingIndicator","formatTaggedMessage","ShowOriginalButton","TranslateButton","ActivityMessage","isLoading","isTranslation","event","props","id","tagged_message","onTranslate","translatedTaggedMessage","setState","preventDefault","prevProps","translationFailed","prevTaggedMessage","prevTranslationFailed","button","handleShowOriginal","handleTranslate","translationEnabled","getUserProfileUrl","state","commentToDisplay","getButton","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,gBAAP,MAA6B,6CAA7B;AACA,OAAOC,mBAAP,MAAgC,iCAAhC;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,OAAO,wBAAP;;IAiBMC,e;;;;;;;;;;;;;;;;;;4DAKM;AACJC,MAAAA,SAAS,EAAE,KADP;AAEJC,MAAAA,aAAa,EAAE;AAFX,K;;sEA6BU,UAACC,KAAD,EAAwC;AAAA,wBACsB,MAAKC,KAD3B;AAAA,UAC9CC,EAD8C,eAC9CA,EAD8C;AAAA,UAC1CC,cAD0C,eAC1CA,cAD0C;AAAA,8CAC1BC,WAD0B;AAAA,UAC1BA,WAD0B,sCACZZ,IADY;AAAA,UACNa,uBADM,eACNA,uBADM;;AAEtD,UAAI,CAACA,uBAAL,EAA8B;AAC1B,cAAKC,QAAL,CAAc;AAAER,UAAAA,SAAS,EAAE;AAAb,SAAd;;AACAM,QAAAA,WAAW,CAAC;AAAEF,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,cAAc,EAAdA;AAAN,SAAD,CAAX;AACH;;AAED,YAAKG,QAAL,CAAc;AAAEP,QAAAA,aAAa,EAAE;AAAjB,OAAd;;AACAC,MAAAA,KAAK,CAACO,cAAN;AACH,K;;yEAEoB,UAACP,KAAD,EAAwC;AACzD,YAAKM,QAAL,CAAc;AAAEP,QAAAA,aAAa,EAAE;AAAjB,OAAd;;AACAC,MAAAA,KAAK,CAACO,cAAN;AACH,K;;;;;;;uCAtCkBC,S,EAAwB;AAAA,yBACgB,KAAKP,KADrB;AAAA,UAC/BI,uBAD+B,gBAC/BA,uBAD+B;AAAA,UACNI,iBADM,gBACNA,iBADM;AAAA,UAENC,iBAFM,GAE0DF,SAF1D,CAE/BH,uBAF+B;AAAA,UAEgCM,qBAFhC,GAE0DH,SAF1D,CAEaC,iBAFb;;AAIvC,UAAIC,iBAAiB,KAAKL,uBAAtB,IAAiDM,qBAAqB,KAAKF,iBAA/E,EAAkG;AAC9F;AACH;;AAED,UAAIJ,uBAAuB,IAAII,iBAA/B,EAAkD;AAC9C,aAAKH,QAAL,CAAc;AAAER,UAAAA,SAAS,EAAE;AAAb,SAAd;AACH;AACJ;;;8BAESC,a,EAAqC;AAC3C,UAAIa,MAAM,GAAG,IAAb;;AACA,UAAIb,aAAJ,EAAmB;AACfa,QAAAA,MAAM,GAAG,oBAAC,kBAAD;AAAoB,UAAA,kBAAkB,EAAE,KAAKC;AAA7C,UAAT;AACH,OAFD,MAEO;AACHD,QAAAA,MAAM,GAAG,oBAAC,eAAD;AAAiB,UAAA,eAAe,EAAE,KAAKE;AAAvC,UAAT;AACH;;AAED,aAAOF,MAAP;AACH;;;6BAkBoB;AAAA,yBAC8E,KAAKX,KADnF;AAAA,UACTC,EADS,gBACTA,EADS;AAAA,UACLC,cADK,gBACLA,cADK;AAAA,UACWE,uBADX,gBACWA,uBADX;AAAA,UACoCU,kBADpC,gBACoCA,kBADpC;AAAA,UACwDC,iBADxD,gBACwDA,iBADxD;AAAA,wBAEoB,KAAKC,KAFzB;AAAA,UAETnB,SAFS,eAETA,SAFS;AAAA,UAEEC,aAFF,eAEEA,aAFF;AAGjB,UAAMmB,gBAAgB,GAClBH,kBAAkB,IAAIhB,aAAtB,IAAuCM,uBAAvC,GAAiEA,uBAAjE,GAA2FF,cAD/F;AAEA,aAAOL,SAAS,GACZ;AAAK,QAAA,SAAS,EAAC;AAAf,SACI,oBAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC;AAAvB,QADJ,CADY,GAKZ;AAAK,QAAA,SAAS,EAAC;AAAf,SACKJ,mBAAmB,CAACwB,gBAAD,EAAmBhB,EAAnB,EAAuB,KAAvB,EAA8Bc,iBAA9B,CADxB,EAEKD,kBAAkB,GAAG,KAAKI,SAAL,CAAepB,aAAf,CAAH,GAAmC,IAF1D,CALJ;AAUH;;;;EAjEyBR,KAAK,CAAC6B,S;;gBAA9BvB,e,kBACoB;AAClBkB,EAAAA,kBAAkB,EAAE;AADF,C;;AAmE1B,eAAelB,eAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport LoadingIndicator from '../../../../../components/loading-indicator';\nimport formatTaggedMessage from '../../utils/formatTaggedMessage';\nimport ShowOriginalButton from './ShowOriginalButton';\nimport TranslateButton from './TranslateButton';\nimport type { GetProfileUrlCallback } from '../../../../common/flowTypes';\nimport './ActivityMessage.scss';\n\ntype Props = {\n    getUserProfileUrl?: GetProfileUrlCallback,\n    id: string,\n    onTranslate?: Function,\n    tagged_message: string,\n    translatedTaggedMessage?: string,\n    translationEnabled?: boolean,\n    translationFailed?: ?boolean,\n};\n\ntype State = {\n    isLoading?: boolean,\n    isTranslation?: boolean,\n};\n\nclass ActivityMessage extends React.Component<Props, State> {\n    static defaultProps = {\n        translationEnabled: false,\n    };\n\n    state = {\n        isLoading: false,\n        isTranslation: false,\n    };\n\n    componentDidUpdate(prevProps: Props): void {\n        const { translatedTaggedMessage, translationFailed } = this.props;\n        const { translatedTaggedMessage: prevTaggedMessage, translationFailed: prevTranslationFailed } = prevProps;\n\n        if (prevTaggedMessage === translatedTaggedMessage || prevTranslationFailed === translationFailed) {\n            return;\n        }\n\n        if (translatedTaggedMessage || translationFailed) {\n            this.setState({ isLoading: false });\n        }\n    }\n\n    getButton(isTranslation?: boolean): React.Node {\n        let button = null;\n        if (isTranslation) {\n            button = <ShowOriginalButton handleShowOriginal={this.handleShowOriginal} />;\n        } else {\n            button = <TranslateButton handleTranslate={this.handleTranslate} />;\n        }\n\n        return button;\n    }\n\n    handleTranslate = (event: SyntheticMouseEvent<>): void => {\n        const { id, tagged_message, onTranslate = noop, translatedTaggedMessage } = this.props;\n        if (!translatedTaggedMessage) {\n            this.setState({ isLoading: true });\n            onTranslate({ id, tagged_message });\n        }\n\n        this.setState({ isTranslation: true });\n        event.preventDefault();\n    };\n\n    handleShowOriginal = (event: SyntheticMouseEvent<>): void => {\n        this.setState({ isTranslation: false });\n        event.preventDefault();\n    };\n\n    render(): React.Node {\n        const { id, tagged_message, translatedTaggedMessage, translationEnabled, getUserProfileUrl } = this.props;\n        const { isLoading, isTranslation } = this.state;\n        const commentToDisplay =\n            translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;\n        return isLoading ? (\n            <div className=\"bcs-ActivityMessageLoading\">\n                <LoadingIndicator size=\"small\" />\n            </div>\n        ) : (\n            <div className=\"bcs-ActivityMessage\">\n                {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}\n                {translationEnabled ? this.getButton(isTranslation) : null}\n            </div>\n        );\n    }\n}\n\nexport default ActivityMessage;\n"],"file":"ActivityMessage.js"}
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js"],"names":["React","noop","FormattedMessage","CollapsableMessage","formatTaggedMessage","LoadingIndicator","messages","ShowOriginalButton","TranslateButton","withFeatureConsumer","isFeatureEnabled","ActivityMessage","isLoading","isTranslation","event","props","id","tagged_message","onTranslate","translatedTaggedMessage","setState","preventDefault","prevProps","translationFailed","prevTaggedMessage","prevTranslationFailed","button","handleShowOriginal","handleTranslate","features","getUserProfileUrl","isEdited","translationEnabled","state","commentToDisplay","MessageWrapper","Fragment","activityMessageEdited","getButton","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport { FormattedMessage } from 'react-intl';\nimport CollapsableMessage from './CollapsableMessage';\nimport formatTaggedMessage from '../../utils/formatTaggedMessage';\nimport LoadingIndicator from '../../../../../components/loading-indicator';\nimport messages from './messages';\nimport ShowOriginalButton from './ShowOriginalButton';\nimport TranslateButton from './TranslateButton';\nimport { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';\n\nimport type { GetProfileUrlCallback } from '../../../../common/flowTypes';\nimport type { FeatureConfig } from '../../../../common/feature-checking';\n\nimport './ActivityMessage.scss';\n\ntype Props = {\n    features: FeatureConfig,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    id: string,\n    isEdited?: boolean,\n    onTranslate?: Function,\n    tagged_message: string,\n    translatedTaggedMessage?: string,\n    translationEnabled?: boolean,\n    translationFailed?: ?boolean,\n};\n\ntype State = {\n    isLoading?: boolean,\n    isTranslation?: boolean,\n};\n\nclass ActivityMessage extends React.Component<Props, State> {\n    static defaultProps = {\n        isEdited: false,\n        translationEnabled: false,\n    };\n\n    state = {\n        isLoading: false,\n        isTranslation: false,\n    };\n\n    componentDidUpdate(prevProps: Props): void {\n        const { translatedTaggedMessage, translationFailed } = this.props;\n        const { translatedTaggedMessage: prevTaggedMessage, translationFailed: prevTranslationFailed } = prevProps;\n\n        if (prevTaggedMessage === translatedTaggedMessage || prevTranslationFailed === translationFailed) {\n            return;\n        }\n\n        if (translatedTaggedMessage || translationFailed) {\n            this.setState({ isLoading: false });\n        }\n    }\n\n    getButton(isTranslation?: boolean): React.Node {\n        let button = null;\n        if (isTranslation) {\n            button = <ShowOriginalButton handleShowOriginal={this.handleShowOriginal} />;\n        } else {\n            button = <TranslateButton handleTranslate={this.handleTranslate} />;\n        }\n\n        return button;\n    }\n\n    handleTranslate = (event: SyntheticMouseEvent<>): void => {\n        const { id, tagged_message, onTranslate = noop, translatedTaggedMessage } = this.props;\n        if (!translatedTaggedMessage) {\n            this.setState({ isLoading: true });\n            onTranslate({ id, tagged_message });\n        }\n\n        this.setState({ isTranslation: true });\n        event.preventDefault();\n    };\n\n    handleShowOriginal = (event: SyntheticMouseEvent<>): void => {\n        this.setState({ isTranslation: false });\n        event.preventDefault();\n    };\n\n    render(): React.Node {\n        const {\n            features,\n            getUserProfileUrl,\n            id,\n            isEdited,\n            tagged_message,\n            translatedTaggedMessage,\n            translationEnabled,\n        } = this.props;\n        const { isLoading, isTranslation } = this.state;\n        const commentToDisplay =\n            translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;\n        const MessageWrapper = isFeatureEnabled(features, 'activityFeed.collapsableMessages.enabled')\n            ? CollapsableMessage\n            : React.Fragment;\n\n        return isLoading ? (\n            <div className=\"bcs-ActivityMessageLoading\">\n                <LoadingIndicator size=\"small\" />\n            </div>\n        ) : (\n            <div className=\"bcs-ActivityMessage\">\n                <MessageWrapper>\n                    {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}\n                    {isEdited && (\n                        <span className=\"bcs-ActivityMessage-edited\">\n                            <FormattedMessage {...messages.activityMessageEdited} />\n                        </span>\n                    )}\n                </MessageWrapper>\n                {translationEnabled ? this.getButton(isTranslation) : null}\n            </div>\n        );\n    }\n}\n\nexport { ActivityMessage };\nexport default withFeatureConsumer(ActivityMessage);\n"],"file":"ActivityMessage.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.scss

@@ -13,14 +13,51 @@
     }
 }
 
+.bcs-ActivityMessage-edited {
+    color: $bdl-gray-62;
+}
+
 .bcs-ActivityMessage-mention {
     overflow: initial;
     white-space: normal;
 }
 
-.bcs-ActivityMessage-translate {
-    display: block;
-    color: $bdl-box-blue;
+.bcs-ActivityMessage-collapsed {
+    /* webkit-line-clamp only works in combination with -webkit-box */
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+}
+
+.bcs-ActivityMessage-translate,
+.bcs-ActivityMessage-toggleMoreLess {
+    &.btn-plain {
+        display: block;
+        margin-left: -2px;
+        color: $bdl-box-blue;
+        font-weight: bold;
+        // to align with rest of text despite invisible border
+        line-height: $bdl-line-height - 4px;
+        border: 2px solid transparent;
+        border-radius: 2px;
+
+        &:hover,
+        &:active {
+            text-decoration: underline;
+        }
+
+        &:active {
+            color: $bdl-light-blue;
+        }
+
+        &:focus-visible {
+            border-color: $bdl-box-blue;
+        }
+    }
 }
 
 .bcs-ActivityMessageLoading {

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessage.js

@@ -0,0 +1,49 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import * as React from 'react';
+import classNames from 'classnames';
+import CollapsableMessageToggle from './CollapsableMessageToggle';
+import './ActivityMessage.scss';
+export default function CollapsableMessage(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isCollapsed = _React$useState2[0],
+      setIsCollapsed = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      shouldCollapse = _React$useState4[0],
+      setShouldCollapse = _React$useState4[1];
+
+  var messageContainer = React.useRef(null);
+  React.useLayoutEffect(function () {
+    if (messageContainer.current) {
+      var _messageContainer$cur = messageContainer.current,
+          clientHeight = _messageContainer$cur.clientHeight,
+          scrollHeight = _messageContainer$cur.scrollHeight;
+      setShouldCollapse(clientHeight !== scrollHeight);
+    }
+  }, []);
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: classNames({
+      'bcs-ActivityMessage-collapsed': isCollapsed
+    }),
+    ref: messageContainer
+  }, children), shouldCollapse && React.createElement(CollapsableMessageToggle, {
+    isMore: isCollapsed,
+    onClick: function onClick() {
+      return setIsCollapsed(function (prevState) {
+        return !prevState;
+      });
+    }
+  }));
+}
+//# sourceMappingURL=CollapsableMessage.js.map

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessage.js.flow

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import CollapsableMessageToggle from './CollapsableMessageToggle';
+import './ActivityMessage.scss';
+
+type Props = {
+    children: React.Node,
+};
+
+export default function CollapsableMessage({ children }: Props) {
+    const [isCollapsed, setIsCollapsed] = React.useState(true);
+    const [shouldCollapse, setShouldCollapse] = React.useState(false);
+    const messageContainer = React.useRef<HTMLDivElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        if (messageContainer.current) {
+            const { clientHeight, scrollHeight } = messageContainer.current;
+            setShouldCollapse(clientHeight !== scrollHeight);
+        }
+    }, []);
+
+    return (
+        <>
+            <div
+                className={classNames({
+                    'bcs-ActivityMessage-collapsed': isCollapsed,
+                })}
+                ref={messageContainer}
+            >
+                {children}
+            </div>
+
+            {shouldCollapse && (
+                <CollapsableMessageToggle
+                    isMore={isCollapsed}
+                    onClick={() => setIsCollapsed(prevState => !prevState)}
+                />
+            )}
+        </>
+    );
+}

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessage.js"],"names":["React","classNames","CollapsableMessageToggle","CollapsableMessage","children","useState","isCollapsed","setIsCollapsed","shouldCollapse","setShouldCollapse","messageContainer","useRef","useLayoutEffect","current","clientHeight","scrollHeight","prevState"],"mappings":";;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,wBAAP,MAAqC,4BAArC;AACA,OAAO,wBAAP;AAMA,eAAe,SAASC,kBAAT,OAAiD;AAAA,MAAnBC,QAAmB,QAAnBA,QAAmB;;AAAA,wBACtBJ,KAAK,CAACK,QAAN,CAAe,IAAf,CADsB;AAAA;AAAA,MACrDC,WADqD;AAAA,MACxCC,cADwC;;AAAA,yBAEhBP,KAAK,CAACK,QAAN,CAAe,KAAf,CAFgB;AAAA;AAAA,MAErDG,cAFqD;AAAA,MAErCC,iBAFqC;;AAG5D,MAAMC,gBAAgB,GAAGV,KAAK,CAACW,MAAN,CAAoC,IAApC,CAAzB;AAEAX,EAAAA,KAAK,CAACY,eAAN,CAAsB,YAAM;AACxB,QAAIF,gBAAgB,CAACG,OAArB,EAA8B;AAAA,kCACaH,gBAAgB,CAACG,OAD9B;AAAA,UAClBC,YADkB,yBAClBA,YADkB;AAAA,UACJC,YADI,yBACJA,YADI;AAE1BN,MAAAA,iBAAiB,CAACK,YAAY,KAAKC,YAAlB,CAAjB;AACH;AACJ,GALD,EAKG,EALH;AAOA,SACI,0CACI;AACI,IAAA,SAAS,EAAEd,UAAU,CAAC;AAClB,uCAAiCK;AADf,KAAD,CADzB;AAII,IAAA,GAAG,EAAEI;AAJT,KAMKN,QANL,CADJ,EAUKI,cAAc,IACX,oBAAC,wBAAD;AACI,IAAA,MAAM,EAAEF,WADZ;AAEI,IAAA,OAAO,EAAE;AAAA,aAAMC,cAAc,CAAC,UAAAS,SAAS;AAAA,eAAI,CAACA,SAAL;AAAA,OAAV,CAApB;AAAA;AAFb,IAXR,CADJ;AAmBH","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport CollapsableMessageToggle from './CollapsableMessageToggle';\nimport './ActivityMessage.scss';\n\ntype Props = {\n    children: React.Node,\n};\n\nexport default function CollapsableMessage({ children }: Props) {\n    const [isCollapsed, setIsCollapsed] = React.useState(true);\n    const [shouldCollapse, setShouldCollapse] = React.useState(false);\n    const messageContainer = React.useRef<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (messageContainer.current) {\n            const { clientHeight, scrollHeight } = messageContainer.current;\n            setShouldCollapse(clientHeight !== scrollHeight);\n        }\n    }, []);\n\n    return (\n        <>\n            <div\n                className={classNames({\n                    'bcs-ActivityMessage-collapsed': isCollapsed,\n                })}\n                ref={messageContainer}\n            >\n                {children}\n            </div>\n\n            {shouldCollapse && (\n                <CollapsableMessageToggle\n                    isMore={isCollapsed}\n                    onClick={() => setIsCollapsed(prevState => !prevState)}\n                />\n            )}\n        </>\n    );\n}\n"],"file":"CollapsableMessage.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessageToggle.js

@@ -0,0 +1,21 @@
+/**
+ * 
+ * @file Show more/less button
+ */
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PlainButton from '../../../../../components/plain-button';
+import messages from './messages';
+
+var CollapsableMessageToggle = function CollapsableMessageToggle(_ref) {
+  var isMore = _ref.isMore,
+      onClick = _ref.onClick;
+  return React.createElement(PlainButton, {
+    className: "bcs-ActivityMessage-toggleMoreLess",
+    onClick: onClick,
+    type: "button"
+  }, React.createElement(FormattedMessage, isMore ? messages.activityMessageSeeMore : messages.activityMessageSeeLess));
+};
+
+export default CollapsableMessageToggle;
+//# sourceMappingURL=CollapsableMessageToggle.js.map

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessageToggle.js.flow

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ * @file Show more/less button
+ */
+
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import PlainButton from '../../../../../components/plain-button';
+
+import messages from './messages';
+
+type Props = {
+    isMore: boolean,
+    onClick: () => void,
+};
+
+const CollapsableMessageToggle = ({ isMore, onClick }: Props): React.Node => (
+    <PlainButton className="bcs-ActivityMessage-toggleMoreLess" onClick={onClick} type="button">
+        <FormattedMessage {...(isMore ? messages.activityMessageSeeMore : messages.activityMessageSeeLess)} />
+    </PlainButton>
+);
+
+export default CollapsableMessageToggle;

package/es/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessageToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessageToggle.js"],"names":["React","FormattedMessage","PlainButton","messages","CollapsableMessageToggle","isMore","onClick","activityMessageSeeMore","activityMessageSeeLess"],"mappings":"AAAA;;;;AAKA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAEA,OAAOC,WAAP,MAAwB,wCAAxB;AAEA,OAAOC,QAAP,MAAqB,YAArB;;AAOA,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,MAAWC,OAAX,QAAWA,OAAX;AAAA,SAC7B,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC,oCAAvB;AAA4D,IAAA,OAAO,EAAEA,OAArE;AAA8E,IAAA,IAAI,EAAC;AAAnF,KACI,oBAAC,gBAAD,EAAuBD,MAAM,GAAGF,QAAQ,CAACI,sBAAZ,GAAqCJ,QAAQ,CAACK,sBAA3E,CADJ,CAD6B;AAAA,CAAjC;;AAMA,eAAeJ,wBAAf","sourcesContent":["/**\n * @flow\n * @file Show more/less button\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport PlainButton from '../../../../../components/plain-button';\n\nimport messages from './messages';\n\ntype Props = {\n    isMore: boolean,\n    onClick: () => void,\n};\n\nconst CollapsableMessageToggle = ({ isMore, onClick }: Props): React.Node => (\n    <PlainButton className=\"bcs-ActivityMessage-toggleMoreLess\" onClick={onClick} type=\"button\">\n        <FormattedMessage {...(isMore ? messages.activityMessageSeeMore : messages.activityMessageSeeLess)} />\n    </PlainButton>\n);\n\nexport default CollapsableMessageToggle;\n"],"file":"CollapsableMessageToggle.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-message/messages.js

@@ -7,6 +7,18 @@ var messages = defineMessages({
   activityMessageTranslate: {
     "id": "be.contentSidebar.activityFeed.common.translateMessage",
     "defaultMessage": "Translate"
+  },
+  activityMessageSeeMore: {
+    "id": "be.contentSidebar.activityFeed.common.seeMoreMessage",
+    "defaultMessage": "See more"
+  },
+  activityMessageSeeLess: {
+    "id": "be.contentSidebar.activityFeed.common.seeLessMessage",
+    "defaultMessage": "See less"
+  },
+  activityMessageEdited: {
+    "id": "be.contentSidebar.activityFeed.common.editedMessage",
+    "defaultMessage": " (edited)"
   }
 });
 export default messages;

package/es/elements/content-sidebar/activity-feed/common/activity-message/messages.js.flow

@@ -12,6 +12,21 @@ const messages = defineMessages({
         defaultMessage: 'Translate',
         description: 'Translate button for translating comment',
     },
+    activityMessageSeeMore: {
+        id: 'be.contentSidebar.activityFeed.common.seeMoreMessage',
+        defaultMessage: 'See more',
+        description: 'See more button for showing whole long message',
+    },
+    activityMessageSeeLess: {
+        id: 'be.contentSidebar.activityFeed.common.seeLessMessage',
+        defaultMessage: 'See less',
+        description: 'See less button for hiding part of long message',
+    },
+    activityMessageEdited: {
+        id: 'be.contentSidebar.activityFeed.common.editedMessage',
+        defaultMessage: ' (edited)',
+        description: 'Label indicating that message was edited, should be lowercase',
+    },
 });
 
 export default messages;

package/es/elements/content-sidebar/activity-feed/common/activity-message/messages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/messages.js"],"names":["defineMessages","messages","activityMessageShowOriginal","activityMessageTranslate"],"mappings":"AACA,SAASA,cAAT,QAA+B,YAA/B;AAEA,IAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,2BAA2B;AAAA;AAAA;AAAA,GADC;AAM5BC,EAAAA,wBAAwB;AAAA;AAAA;AAAA;AANI,CAAD,CAA/B;AAaA,eAAeF,QAAf","sourcesContent":["// @flow\nimport { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    activityMessageShowOriginal: {\n        id: 'be.contentSidebar.activityFeed.commmon.showOriginalMessage',\n        defaultMessage: 'Show Original',\n        description: 'Show original button for showing original comment',\n    },\n    activityMessageTranslate: {\n        id: 'be.contentSidebar.activityFeed.common.translateMessage',\n        defaultMessage: 'Translate',\n        description: 'Translate button for translating comment',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/messages.js"],"names":["defineMessages","messages","activityMessageShowOriginal","activityMessageTranslate","activityMessageSeeMore","activityMessageSeeLess","activityMessageEdited"],"mappings":"AACA,SAASA,cAAT,QAA+B,YAA/B;AAEA,IAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,2BAA2B;AAAA;AAAA;AAAA,GADC;AAM5BC,EAAAA,wBAAwB;AAAA;AAAA;AAAA,GANI;AAW5BC,EAAAA,sBAAsB;AAAA;AAAA;AAAA,GAXM;AAgB5BC,EAAAA,sBAAsB;AAAA;AAAA;AAAA,GAhBM;AAqB5BC,EAAAA,qBAAqB;AAAA;AAAA;AAAA;AArBO,CAAD,CAA/B;AA4BA,eAAeL,QAAf","sourcesContent":["// @flow\nimport { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    activityMessageShowOriginal: {\n        id: 'be.contentSidebar.activityFeed.commmon.showOriginalMessage',\n        defaultMessage: 'Show Original',\n        description: 'Show original button for showing original comment',\n    },\n    activityMessageTranslate: {\n        id: 'be.contentSidebar.activityFeed.common.translateMessage',\n        defaultMessage: 'Translate',\n        description: 'Translate button for translating comment',\n    },\n    activityMessageSeeMore: {\n        id: 'be.contentSidebar.activityFeed.common.seeMoreMessage',\n        defaultMessage: 'See more',\n        description: 'See more button for showing whole long message',\n    },\n    activityMessageSeeLess: {\n        id: 'be.contentSidebar.activityFeed.common.seeLessMessage',\n        defaultMessage: 'See less',\n        description: 'See less button for hiding part of long message',\n    },\n    activityMessageEdited: {\n        id: 'be.contentSidebar.activityFeed.common.editedMessage',\n        defaultMessage: ' (edited)',\n        description: 'Label indicating that message was edited, should be lowercase',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import LabelPill from '../../../../../components/label-pill';
+import { COMMENT_STATUS_RESOLVED } from '../../../../../constants';
+import messages from './messages';
+import './ActivityStatus.scss';
+
+var ActivityStatus = function ActivityStatus(_ref) {
+  var status = _ref.status;
+
+  if (status !== COMMENT_STATUS_RESOLVED) {
+    return null;
+  }
+
+  return React.createElement("div", {
+    className: "bcs-ActivityStatus",
+    "data-testid": "bcs-ActivityStatus"
+  }, React.createElement(LabelPill.Pill, {
+    type: "success"
+  }, React.createElement(LabelPill.Text, null, React.createElement(FormattedMessage, messages.activityStatusResolved))));
+};
+
+export default ActivityStatus;
+//# sourceMappingURL=ActivityStatus.js.map

package/es/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.js.flow

@@ -0,0 +1,30 @@
+// @flow
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import LabelPill from '../../../../../components/label-pill';
+import { COMMENT_STATUS_RESOLVED } from '../../../../../constants';
+import messages from './messages';
+import type { FeedItemStatus } from '../../../../../common/types/feed';
+import './ActivityStatus.scss';
+
+type Props = {
+    status?: FeedItemStatus,
+};
+
+const ActivityStatus = ({ status }: Props): React.Node => {
+    if (status !== COMMENT_STATUS_RESOLVED) {
+        return null;
+    }
+
+    return (
+        <div className="bcs-ActivityStatus" data-testid="bcs-ActivityStatus">
+            <LabelPill.Pill type="success">
+                <LabelPill.Text>
+                    <FormattedMessage {...messages.activityStatusResolved} />
+                </LabelPill.Text>
+            </LabelPill.Pill>
+        </div>
+    );
+};
+
+export default ActivityStatus;

package/es/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.js"],"names":["React","FormattedMessage","LabelPill","COMMENT_STATUS_RESOLVED","messages","ActivityStatus","status","activityStatusResolved"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,SAAP,MAAsB,sCAAtB;AACA,SAASC,uBAAT,QAAwC,0BAAxC;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,uBAAP;;AAMA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAAmC;AAAA,MAAhCC,MAAgC,QAAhCA,MAAgC;;AACtD,MAAIA,MAAM,KAAKH,uBAAf,EAAwC;AACpC,WAAO,IAAP;AACH;;AAED,SACI;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,mBAAY;AAAhD,KACI,oBAAC,SAAD,CAAW,IAAX;AAAgB,IAAA,IAAI,EAAC;AAArB,KACI,oBAAC,SAAD,CAAW,IAAX,QACI,oBAAC,gBAAD,EAAsBC,QAAQ,CAACG,sBAA/B,CADJ,CADJ,CADJ,CADJ;AASH,CAdD;;AAgBA,eAAeF,cAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport LabelPill from '../../../../../components/label-pill';\nimport { COMMENT_STATUS_RESOLVED } from '../../../../../constants';\nimport messages from './messages';\nimport type { FeedItemStatus } from '../../../../../common/types/feed';\nimport './ActivityStatus.scss';\n\ntype Props = {\n    status?: FeedItemStatus,\n};\n\nconst ActivityStatus = ({ status }: Props): React.Node => {\n    if (status !== COMMENT_STATUS_RESOLVED) {\n        return null;\n    }\n\n    return (\n        <div className=\"bcs-ActivityStatus\" data-testid=\"bcs-ActivityStatus\">\n            <LabelPill.Pill type=\"success\">\n                <LabelPill.Text>\n                    <FormattedMessage {...messages.activityStatusResolved} />\n                </LabelPill.Text>\n            </LabelPill.Pill>\n        </div>\n    );\n};\n\nexport default ActivityStatus;\n"],"file":"ActivityStatus.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.scss

@@ -0,0 +1,6 @@
+@import '../../../../../styles/variables';
+
+.bcs-ActivityStatus {
+    margin-top: 5 * $bdl-grid-unit;
+    margin-bottom: 3 * $bdl-grid-unit;
+}

package/es/elements/content-sidebar/activity-feed/common/activity-status/index.js

@@ -0,0 +1,2 @@
+export { default } from './ActivityStatus';
+//# sourceMappingURL=index.js.map

package/es/elements/content-sidebar/activity-feed/common/activity-status/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './ActivityStatus';

package/es/elements/content-sidebar/activity-feed/common/activity-status/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-status/index.js"],"names":["default"],"mappings":"AACA,SAASA,OAAT,QAAwB,kBAAxB","sourcesContent":["// @flow\nexport { default } from './ActivityStatus';\n"],"file":"index.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-status/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+var messages = defineMessages({
+  activityStatusResolved: {
+    "id": "be.contentSidebar.activityFeed.common.activityStatusResolved",
+    "defaultMessage": "RESOLVED"
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/es/elements/content-sidebar/activity-feed/common/activity-status/messages.js.flow

@@ -0,0 +1,13 @@
+// @flow
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    activityStatusResolved: {
+        id: 'be.contentSidebar.activityFeed.common.activityStatusResolved',
+        defaultMessage: 'RESOLVED',
+        description:
+            'Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)',
+    },
+});
+
+export default messages;

package/es/elements/content-sidebar/activity-feed/common/activity-status/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-status/messages.js"],"names":["defineMessages","messages","activityStatusResolved"],"mappings":"AACA,SAASA,cAAT,QAA+B,YAA/B;AAEA,IAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,sBAAsB;AAAA;AAAA;AAAA;AADM,CAAD,CAA/B;AASA,eAAeD,QAAf","sourcesContent":["// @flow\nimport { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    activityStatusResolved: {\n        id: 'be.contentSidebar.activityFeed.common.activityStatusResolved',\n        defaultMessage: 'RESOLVED',\n        description:\n            'Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}

package/es/elements/content-sidebar/activity-feed/common/activity-timestamp/ActivityTimestamp.scss

@@ -1,7 +1,7 @@
 @import '../../../../../styles/variables';
 
 .bcs-ActivityTimestamp {
-    color: $bdl-gray-62;
+    color: $bdl-gray-80;
     font-size: 12px;
     line-height: 20px;
     cursor: default;