@instructure/outcomes-ui 2.1.8 → 3.0.0

package/es/translated/fr/components/AlignmentWidget/index.js

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
@@ -12,22 +13,14 @@ import { Button, IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { IconArrowOpenEndLine, IconArrowOpenDownLine, IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
 import { List } from '@instructure/ui-list';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import OutcomePickerModal from "../OutcomePickerModal/index.js";
 import AlignmentItem from "../AlignmentItem/index.js";
 import AlignmentCount from "../AlignmentCount/index.js";
-import { outcomeShape } from "../../store/shapes.js";
-import theme from "../theme.js";
-var styles = {
-  componentId: 'bKqnu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__AlignmentWidget--spacing {\n  padding-right: ".concat(theme.outcomeLabelsSpacing || 'inherit', ";\n}\n\n.outcomes-ui__AlignmentWidget--line {\n  display: flex;\n}\n\n.outcomes-ui__AlignmentWidget--button {\n  margin-top: 1rem;\n}\n");
-  },
-  'spacing': 'outcomes-ui__AlignmentWidget--spacing',
-  'line': 'outcomes-ui__AlignmentWidget--line',
-  'button': 'outcomes-ui__AlignmentWidget--button'
-};
-var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { outcomeShape, stylesShape } from "../../store/shapes.js";
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+var AlignmentWidget = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(AlignmentWidget, _React$Component);
 
   var _super = _createSuper(AlignmentWidget);
@@ -54,28 +47,22 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       var renderCollapsed = _this.state.renderCollapsed;
       var enableToggleAction = alignedOutcomes.length > 0;
 
-      if (!enableToggleAction) {
-        _this.setState({
-          renderCollapsed: true
-        });
-      }
-
       if (canManageOutcomes || alignedOutcomes.length) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.line,
+        return jsx("div", {
+          css: _this.props.styles.line,
           "data-automation": "outcomeLabel__alignedOutcomes",
           style: {
-            'align-items': 'center'
+            alignItems: 'center'
           }
-        }, /*#__PURE__*/React.createElement(Text, {
+        }, jsx(Text, {
           size: "medium"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.spacing
-        }, /*#__PURE__*/React.createElement("span", {
+        }, jsx("div", {
+          css: _this.props.styles.spacing
+        }, jsx("span", {
           style: {
-            'padding-right': '0.5em'
+            paddingRight: '0.5em'
           }
-        }, /*#__PURE__*/React.createElement(IconButton, {
+        }, jsx(IconButton, {
           size: "small",
           screenReaderLabel: renderCollapsed ? "Expand the list of aligned Outcomes" : "Collapse the list of aligned Outcomes",
           withBackground: false,
@@ -83,15 +70,15 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           interaction: enableToggleAction ? 'enabled' : 'disabled',
           onClick: _this.toggleAlignmentList,
           "data-automation": "alignmentWidget__collapseButton"
-        }, renderCollapsed ? /*#__PURE__*/React.createElement(IconArrowOpenEndLine, {
+        }, renderCollapsed ? jsx(IconArrowOpenEndLine, {
           "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, {
+        }) : jsx(IconArrowOpenDownLine, {
           "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
+        }))), jsx(IconOutcomesLine, null))), jsx(Text, {
           size: "medium"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.spacing
-        }, "R\xE9sultats align\xE9s", " \xA0", /*#__PURE__*/React.createElement(AlignmentCount, {
+        }, jsx("div", {
+          css: _this.props.styles.spacing
+        }, "R\xE9sultats align\xE9s", " \xA0", jsx(AlignmentCount, {
           count: alignedOutcomes.length
         }))));
       }
@@ -104,26 +91,27 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
 
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          canManageOutcomes = _this$props2.canManageOutcomes;
-      return /*#__PURE__*/React.createElement(List, {
+          canManageOutcomes = _this$props2.canManageOutcomes,
+          features = _this$props2.features;
+      return jsx(List, {
         isUnstyled: true,
-        margin: "small 0",
-        delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+        margin: "small 0"
+      }, alignedOutcomes.length > 0 && jsx(List.Item, {
         key: "delimiter-0"
       }), alignedOutcomes.map(function (outcome, index) {
-        return /*#__PURE__*/React.createElement(List.Item, {
+        return jsx(List.Item, {
           padding: "0 small 0 medium",
           key: outcome.id
-        }, /*#__PURE__*/React.createElement(AlignmentItem, {
+        }, jsx(AlignmentItem, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
           outcome: outcome,
           canManageOutcomes: canManageOutcomes,
-          shouldFocus: index === _this.state.focusedItem
+          shouldFocus: index === _this.state.focusedItem,
+          features: features
         }));
-      }), alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+      }), alignedOutcomes.length > 0 && jsx(List.Item, {
         key: "delimiter-1"
       }));
     };
@@ -135,13 +123,15 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           OutcomeTray = _this$props3.tray,
           liveRegion = _this$props3.liveRegion,
           screenreaderNotification = _this$props3.screenreaderNotification,
-          showAlert = _this$props3.showAlert;
-      return /*#__PURE__*/React.createElement(OutcomeTray, Object.assign({
+          showAlert = _this$props3.showAlert,
+          features = _this$props3.features;
+      return jsx(OutcomeTray, Object.assign({
         screenreaderNotification: screenreaderNotification,
         liveRegion: liveRegion,
         scope: scope,
         shouldModifyArtifact: true,
-        showAlert: showAlert
+        showAlert: showAlert,
+        features: features
       }, pickerProps));
     };
 
@@ -151,18 +141,19 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           canManageOutcomes = _this$props4.canManageOutcomes;
 
       if (canManageOutcomes) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.button
-        }, /*#__PURE__*/React.createElement(Button, {
+        return jsx("div", {
+          css: _this.props.styles.button
+        }, jsx(Button, {
           ref: function ref(d) {
             _this.align = d;
           } // eslint-disable-line immutable/no-mutation
           ,
-          icon: IconPlusLine,
+          renderIcon: IconPlusLine,
           onClick: openOutcomePicker,
           "data-automation": "alignmentWidget__button"
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
-          alt: "Aligner les r\xE9sultats"
+        }, jsx(AccessibleContent, {
+          alt: "Aligner les r\xE9sultats",
+          "data-automation": "alignmentWidget__AccessibleContent"
         }, "Acquis")));
       }
     };
@@ -185,6 +176,17 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         }
       }
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (alignedOutcomes.length === 0) {
+        this.setState({
+          renderCollapsed: true
+        });
+      }
+    }
   }, {
     key: "handleRemoveAlignment",
     value: function handleRemoveAlignment(removedOutcome, index) {
@@ -213,7 +215,7 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
+      return jsx("div", null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
     }
   }]);
 
@@ -230,7 +232,9 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   screenreaderNotification: PropTypes.func,
   liveRegion: OutcomePickerModal.propTypes.liveRegion,
   canManageOutcomes: PropTypes.bool.isRequired,
-  showAlert: PropTypes.func
+  showAlert: PropTypes.func,
+  features: PropTypes.array,
+  styles: stylesShape
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
@@ -238,6 +242,7 @@ var AlignmentWidget = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   screenreaderNotification: null,
   liveRegion: null,
   canManageOutcomes: true,
-  showAlert: function showAlert() {}
+  showAlert: function showAlert() {},
+  features: []
 }, _temp)) || _class);
 export { AlignmentWidget as default };

package/es/translated/fr/components/AlignmentWidget/styles.js

@@ -0,0 +1,15 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    spacing: {
+      paddingRight: componentTheme.outcomeLabelsSpacing
+    },
+    line: {
+      display: 'flex'
+    },
+    button: {
+      marginTop: '1rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/fr/components/FlashAlert/index.test.js

@@ -5,6 +5,8 @@ import sinon from 'sinon';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import FlashAlert, { showFlashAlert, showFlashError, showFlashSuccess, defaultTimeout } from "../FlashAlert/index.js";
+import { Transition } from '@instructure/ui-motion';
+import { Alert } from '@instructure/ui-alerts';
 describe('FlashAlert', function () {
   var renderSpy;
   var clock;
@@ -42,20 +44,20 @@ describe('FlashAlert', function () {
   });
   it('renders Transition component', function () {
     var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({})));
-    var transition = screen.find('Transition').first();
+    var transition = screen.find(Transition).first();
     expect(transition).to.exist;
     expect(transition.prop('transitionOnMount')).to.be.true;
     expect(transition.prop('in')).to.be.true;
     expect(transition.prop('type')).to.eq('fade');
     clock.tick(defaultTimeout);
     screen.update();
-    var transition2 = screen.find('Transition').at(1);
+    var transition2 = screen.find(Transition).at(1);
     expect(transition2.prop('in')).to.be.false;
   });
   it('renders Alert component', function () {
     var props = makeProps({});
     var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, props));
-    var alert = screen.find('Alert');
+    var alert = screen.find(Alert);
     expect(alert).to.exist;
     expect(alert.prop('variant')).to.eq(props.variant);
     expect(alert.prop('renderCloseButtonLabel')).to.eq('Close');

package/es/translated/fr/components/OutcomeCheckbox/__tests__/index.test.js

@@ -1,9 +1,11 @@
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import OutcomeCheckbox from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import { Checkbox } from '@instructure/ui-checkbox';
+import { Link } from '@instructure/ui-link';
 describe('OutcomeCheckbox', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -22,15 +24,15 @@ describe('OutcomeCheckbox', function () {
   }
 
   it('renders a checkbox', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Checkbox')).to.have.length(1);
+    expect(wrapper.find(Checkbox)).to.have.length(1);
   });
   it('renders outcome title in link', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
-    var link = wrapper.find('Link');
+    var link = wrapper.find(Link);
     expect(link.text()).to.equal('The student will make cupcakes');
   });
   it('renders friendly description', function () {
@@ -59,7 +61,7 @@ describe('OutcomeCheckbox', function () {
   it('will focus an outcome when the title is clicked', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
-    var click = wrapper.find('Link').prop('onClick');
+    var click = wrapper.find(Link).prop('onClick');
     var preventDefault = sinon.stub();
     click({
       preventDefault: preventDefault
@@ -72,30 +74,31 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+    expect(wrapper.find(Checkbox).prop('checked')).to.equal(false);
   });
   it('does not select the checkbox when not isOutcomeSelected', function () {
     var isOutcomeSelected = sinon.stub().withArgs(101).returns(true);
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+    expect(wrapper.find(Checkbox).prop('checked')).to.equal(true);
   });
   it('calls selectOutcomeIds when unselected and user clicks', function () {
     var isOutcomeSelected = sinon.stub().withArgs(101).returns(false);
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(Checkbox).prop('onChange');
+    change();
     expect(props.selectOutcomeIds.calledWith([101]));
   });
   it('calls deselectOutcomeIds when selected and user clicks', function () {
@@ -103,10 +106,11 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(Checkbox).prop('onChange');
+    change();
     expect(props.deselectOutcomeIds.calledWith([101]));
   });
   it('meets a11y standards', function () {

package/es/translated/fr/components/OutcomeCheckbox/index.js

@@ -5,29 +5,19 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Checkbox } from '@instructure/ui-checkbox';
-import { themeable } from '@instructure/ui-themeable';
-import { outcomeShape } from "../../store/shapes.js";
+import { outcomeShape, stylesShape } from "../../store/shapes.js";
 import OutcomeDescription from "../OutcomeDescription/index.js";
 import { View } from '@instructure/ui-view';
-import theme from "../theme.js";
-var styles = {
-  componentId: 'eEhwE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeCheckbox--checkbox {\n  padding: ".concat(theme.outcomePickerItemPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxLabel {\n  padding-left: ").concat(theme.checkboxLabelLeftPadding || 'inherit', ";\n  display: flex;\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxDescription {\n  padding-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription {\n  margin-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n  margin-bottom: 10px;\n}\n\n.outcomes-ui__OutcomeCheckbox--linkText {\n  display: table;\n  table-layout: fixed;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.outcomes-ui__OutcomeCheckbox--innerLinkText {\n  display: table-cell;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n");
-  },
-  'checkbox': 'outcomes-ui__OutcomeCheckbox--checkbox',
-  'checkboxLabel': 'outcomes-ui__OutcomeCheckbox--checkboxLabel',
-  'checkboxDescription': 'outcomes-ui__OutcomeCheckbox--checkboxDescription',
-  'checkboxFriendlyDescription': 'outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription',
-  'linkText': 'outcomes-ui__OutcomeCheckbox--linkText',
-  'innerLinkText': 'outcomes-ui__OutcomeCheckbox--innerLinkText'
-};
-var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+var OutcomeCheckbox = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeCheckbox, _React$Component);
 
   var _super = _createSuper(OutcomeCheckbox);
@@ -62,52 +52,53 @@ var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       var id = outcome.id,
           description = outcome.description,
           title = outcome.title;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "OutcomeSelector ".concat(styles.checkbox)
-      }, /*#__PURE__*/React.createElement(Checkbox, {
+      return jsx("div", {
+        css: this.props.styles.checkbox,
+        className: "OutcomeSelector"
+      }, jsx(Checkbox, {
         value: id,
         checked: this.selected(),
         onChange: function onChange() {
           return _this.toggleOutcomeSelection();
         },
-        label: /*#__PURE__*/React.createElement("div", {
-          className: styles.checkboxLabel
-        }, /*#__PURE__*/React.createElement(Link, {
+        label: jsx("div", {
+          css: this.props.styles.checkboxLabel
+        }, jsx(Link, {
           onClick: function onClick(e) {
             e.preventDefault();
 
             _this.props.setFocusedOutcome(outcome);
           }
-        }, /*#__PURE__*/React.createElement(Text, {
+        }, jsx(Text, {
           size: "small"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: styles.linkText,
+        }, jsx("span", {
+          css: this.props.styles.linkText,
           "data-automation": "outcomeCheckbox__outcomeName"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: styles.innerLinkText
+        }, jsx("span", {
+          css: this.props.styles.innerLinkText
         }, title)))))
-      }), outcome.friendly_description && /*#__PURE__*/React.createElement("div", {
-        className: styles.checkboxFriendlyDescription
-      }, /*#__PURE__*/React.createElement(View, {
+      }), outcome.friendly_description && jsx("div", {
+        css: this.props.styles.checkboxFriendlyDescription
+      }, jsx(View, {
         as: "div",
         margin: "x-small small 0 0",
         padding: "x-small x-small 0",
         background: "secondary",
         "data-automation": "outcomeCheckbox__friendly_description_header"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-small",
         weight: "bold"
-      }, "Description conviviale")), /*#__PURE__*/React.createElement(View, {
+      }, "Description conviviale")), jsx(View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 x-small x-small",
         background: "secondary",
         "data-automation": "outcomeCheckbox__friendly_description_expanded"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-small"
-      }, outcome.friendly_description))), /*#__PURE__*/React.createElement("div", {
-        className: styles.checkboxDescription
-      }, /*#__PURE__*/React.createElement(OutcomeDescription, {
+      }, outcome.friendly_description))), jsx("div", {
+        css: this.props.styles.checkboxDescription
+      }, jsx(OutcomeDescription, {
         description: description,
         maxLines: 2
       })));
@@ -121,6 +112,7 @@ var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   setFocusedOutcome: PropTypes.func.isRequired,
   isOutcomeSelected: PropTypes.func.isRequired,
   selectOutcomeIds: PropTypes.func.isRequired,
-  deselectOutcomeIds: PropTypes.func.isRequired
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  styles: stylesShape
 }, _temp)) || _class);
 export { OutcomeCheckbox as default };

package/es/translated/fr/components/OutcomeCheckbox/styles.js

@@ -0,0 +1,31 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    checkbox: {
+      padding: componentTheme.outcomePickerItemPadding
+    },
+    checkboxLabel: {
+      paddingLeft: componentTheme.checkboxLabelLeftPadding,
+      display: 'flex'
+    },
+    checkboxDescription: {
+      paddingLeft: componentTheme.checkboxDescriptionLeftPadding
+    },
+    checkboxFriendlyDescription: {
+      marginLeft: componentTheme.checkboxDescriptionLeftPadding,
+      marginBottom: '10px'
+    },
+    linkText: {
+      display: 'table',
+      tableLayout: 'fixed',
+      whiteSpace: 'nowrap',
+      width: '100%'
+    },
+    innerLinkText: {
+      display: 'table-cell',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/fr/components/OutcomeDescription/__tests__/index.test.js

@@ -4,6 +4,7 @@ import { shallow, mount } from 'enzyme';
 import OutcomeDescription from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
 import { ratings } from "../../../test/mockOutcomesData.js";
+import { Text } from '@instructure/ui-text';
 describe('OutcomeDescription', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -58,7 +59,7 @@ describe('OutcomeDescription', function () {
       truncated: false
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
-    var text = wrapper.find('Text').at(1);
+    var text = wrapper.find(Text).at(1);
     expect(text.text()).to.match(/Outcome Friendly Description/);
   });
   it('does not render a friendly description if not expanded', function () {
@@ -66,8 +67,8 @@ describe('OutcomeDescription', function () {
       friendlyDescription: 'Outcome Friendly Description'
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
-    expect(wrapper.find('Text')).to.have.length(1);
-    var text = wrapper.find('Text').at(0);
+    expect(wrapper.find(Text)).to.have.length(1);
+    var text = wrapper.find(Text).at(0);
     expect(text.text()).not.to.match(/Outcome Friendly Description/);
   });
   it('renders the ratings if expanded', function () {

package/es/translated/fr/components/OutcomeDescription/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Ratings from "../Ratings/index.js";
 import t from 'format-message';
 import { algorithmDataShape, scoringTierShape } from "../../store/shapes.js";
-import { HIGHEST, LATEST, N_MASTERY, DECAYING_AVERAGE, AVERAGE, CALCULATION_METHODS } from "../../constants.js";
+import { HIGHEST, LATEST, N_MASTERY, DECAYING_AVERAGE, AVERAGE, CALCULATION_METHODS, WEIGHTED_AVERAGE, STANDARD_DECAYING_AVERAGE, NEW_DECAYING_AVERAGE_FF } from "../../constants.js";
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { TruncateText } from '@instructure/ui-truncate-text';
@@ -22,7 +22,9 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
       ratings = _ref.ratings,
       truncated = _ref.truncated,
       isTray = _ref.isTray,
-      canManageOutcomes = _ref.canManageOutcomes;
+      canManageOutcomes = _ref.canManageOutcomes,
+      features = _ref.features;
+  var newDecayingAvgFFEnabled = features.includes(NEW_DECAYING_AVERAGE_FF);
   var descriptionDisplay = !canManageOutcomes && friendlyDescription ? friendlyDescription : description;
 
   var stripHtmlTags = function stripHtmlTags(text) {
@@ -43,6 +45,35 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
     return /*#__PURE__*/React.createElement(Text, null, renderedText);
   };
 
+  var renderUserFacingMethod = function renderUserFacingMethod(calculationMethod) {
+    var displayMethod = DECAYING_AVERAGE;
+    var percent = calculationInt.decaying_average_percent;
+
+    if (newDecayingAvgFFEnabled) {
+      switch (calculationMethod) {
+        case DECAYING_AVERAGE:
+          {
+            displayMethod = WEIGHTED_AVERAGE;
+            percent = calculationInt.decaying_average_percent;
+            break;
+          }
+
+        case STANDARD_DECAYING_AVERAGE:
+          {
+            displayMethod = STANDARD_DECAYING_AVERAGE;
+            percent = calculationInt.standard_decaying_average_percent;
+            break;
+          }
+      }
+    }
+
+    var complement = 100 - percent;
+    return t(CALCULATION_METHODS[displayMethod], {
+      percent: percent,
+      complement: complement
+    });
+  };
+
   var formatCalculationMethodText = function formatCalculationMethodText() {
     var method = '';
 
@@ -75,13 +106,10 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
         }
 
       case DECAYING_AVERAGE:
+      case STANDARD_DECAYING_AVERAGE:
         {
-          var percent = calculationInt.decaying_average_percent;
-          var complement = 100 - percent;
-          method = t(CALCULATION_METHODS[DECAYING_AVERAGE], {
-            percent: percent,
-            complement: complement
-          });
+          method = renderUserFacingMethod(calculationMethod);
+          break;
         }
     }
 
@@ -89,7 +117,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
   };
 
   var renderFriendlyDescription = function renderFriendlyDescription() {
-    return friendlyDescription && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    return friendlyDescription && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(View, {
       as: "div",
       margin: "x-small small 0 0",
       padding: "small small x-small small",
@@ -133,7 +161,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
     }, formatCalculationMethodText()))));
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && canManageOutcomes && /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement("div", null, label && canManageOutcomes && /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "0 0 xx-small"
   }, renderText(label, 'middle')), !truncated && canManageOutcomes && renderFriendlyDescription(), description && /*#__PURE__*/React.createElement(View, {
@@ -156,7 +184,8 @@ OutcomeDescription.propTypes = {
   ratings: PropTypes.arrayOf(scoringTierShape),
   truncated: PropTypes.bool,
   isTray: PropTypes.bool,
-  canManageOutcomes: PropTypes.bool
+  canManageOutcomes: PropTypes.bool,
+  features: PropTypes.array
 };
 OutcomeDescription.defaultProps = {
   label: '',
@@ -171,6 +200,7 @@ OutcomeDescription.defaultProps = {
   pointsPossible: null,
   ratings: [],
   truncated: true,
-  canManageOutcomes: true
+  canManageOutcomes: true,
+  features: []
 };
 export default OutcomeDescription;