@instructure/outcomes-ui 2.1.8 → 3.0.0

package/lib/translated/cy/components/AlignmentWidget/index.js

@@ -29,7 +29,7 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiList = require("@instructure/ui-list");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
 
@@ -41,18 +41,11 @@ var _shapes = require("../../store/shapes.js");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-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 = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var AlignmentWidget = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AlignmentWidget, _React$Component);
 
   var _super = (0, _createSuper2.default)(AlignmentWidget);
@@ -78,28 +71,22 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var renderCollapsed = _this.state.renderCollapsed;
       var enableToggleAction = alignedOutcomes.length > 0;
 
-      if (!enableToggleAction) {
-        _this.setState({
-          renderCollapsed: true
-        });
-      }
-
       if (canManageOutcomes || alignedOutcomes.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.line,
+        return (0, _emotion.jsx)("div", {
+          css: _this.props.styles.line,
           "data-automation": "outcomeLabel__alignedOutcomes",
           style: {
-            'align-items': 'center'
+            alignItems: 'center'
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           size: "medium"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.spacing
-        }, /*#__PURE__*/_react.default.createElement("span", {
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.spacing
+        }, (0, _emotion.jsx)("span", {
           style: {
-            'padding-right': '0.5em'
+            paddingRight: '0.5em'
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        }, (0, _emotion.jsx)(_uiButtons.IconButton, {
           size: "small",
           screenReaderLabel: renderCollapsed ? "Expand the list of aligned Outcomes" : "Collapse the list of aligned Outcomes",
           withBackground: false,
@@ -107,15 +94,15 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           interaction: enableToggleAction ? 'enabled' : 'disabled',
           onClick: _this.toggleAlignmentList,
           "data-automation": "alignmentWidget__collapseButton"
-        }, renderCollapsed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndLine, {
+        }, renderCollapsed ? (0, _emotion.jsx)(_uiIcons.IconArrowOpenEndLine, {
           "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
+        }) : (0, _emotion.jsx)(_uiIcons.IconArrowOpenDownLine, {
           "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }))), (0, _emotion.jsx)(_uiIcons.IconOutcomesLine, null))), (0, _emotion.jsx)(_uiText.Text, {
           size: "medium"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.spacing
-        }, "Deiliannau wedi\u2019u cysoni", " \xA0", /*#__PURE__*/_react.default.createElement(_index3.default, {
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.spacing
+        }, "Deiliannau wedi\u2019u cysoni", " \xA0", (0, _emotion.jsx)(_index3.default, {
           count: alignedOutcomes.length
         }))));
       }
@@ -128,26 +115,27 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          canManageOutcomes = _this$props2.canManageOutcomes;
-      return /*#__PURE__*/_react.default.createElement(_uiList.List, {
+          canManageOutcomes = _this$props2.canManageOutcomes,
+          features = _this$props2.features;
+      return (0, _emotion.jsx)(_uiList.List, {
         isUnstyled: true,
-        margin: "small 0",
-        delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+        margin: "small 0"
+      }, alignedOutcomes.length > 0 && (0, _emotion.jsx)(_uiList.List.Item, {
         key: "delimiter-0"
       }), alignedOutcomes.map(function (outcome, index) {
-        return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+        return (0, _emotion.jsx)(_uiList.List.Item, {
           padding: "0 small 0 medium",
           key: outcome.id
-        }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        }, (0, _emotion.jsx)(_index2.default, {
           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.default.createElement(_uiList.List.Item, {
+      }), alignedOutcomes.length > 0 && (0, _emotion.jsx)(_uiList.List.Item, {
         key: "delimiter-1"
       }));
     };
@@ -159,13 +147,15 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           OutcomeTray = _this$props3.tray,
           liveRegion = _this$props3.liveRegion,
           screenreaderNotification = _this$props3.screenreaderNotification,
-          showAlert = _this$props3.showAlert;
-      return /*#__PURE__*/_react.default.createElement(OutcomeTray, Object.assign({
+          showAlert = _this$props3.showAlert,
+          features = _this$props3.features;
+      return (0, _emotion.jsx)(OutcomeTray, Object.assign({
         screenreaderNotification: screenreaderNotification,
         liveRegion: liveRegion,
         scope: scope,
         shouldModifyArtifact: true,
-        showAlert: showAlert
+        showAlert: showAlert,
+        features: features
       }, pickerProps));
     };
 
@@ -175,18 +165,19 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           canManageOutcomes = _this$props4.canManageOutcomes;
 
       if (canManageOutcomes) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.button
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)("div", {
+          css: _this.props.styles.button
+        }, (0, _emotion.jsx)(_uiButtons.Button, {
           ref: function ref(d) {
             _this.align = d;
           } // eslint-disable-line immutable/no-mutation
           ,
-          icon: _uiIcons.IconPlusLine,
+          renderIcon: _uiIcons.IconPlusLine,
           onClick: openOutcomePicker,
           "data-automation": "alignmentWidget__button"
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
-          alt: "Cysoni Deilliannau"
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
+          alt: "Cysoni Deilliannau",
+          "data-automation": "alignmentWidget__AccessibleContent"
         }, "Deilliant")));
       }
     };
@@ -209,6 +200,17 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         }
       }
     }
+  }, {
+    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) {
@@ -237,7 +239,7 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
+      return (0, _emotion.jsx)("div", null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
     }
   }]);
   AlignmentWidget.displayName = "AlignmentWidget";
@@ -253,7 +255,9 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   screenreaderNotification: _propTypes.default.func,
   liveRegion: _index.default.propTypes.liveRegion,
   canManageOutcomes: _propTypes.default.bool.isRequired,
-  showAlert: _propTypes.default.func
+  showAlert: _propTypes.default.func,
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
@@ -261,6 +265,7 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   screenreaderNotification: null,
   liveRegion: null,
   canManageOutcomes: true,
-  showAlert: function showAlert() {}
+  showAlert: function showAlert() {},
+  features: []
 }, _temp)) || _class);
 exports.default = AlignmentWidget;

package/lib/translated/cy/components/AlignmentWidget/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    spacing: {
+      paddingRight: componentTheme.outcomeLabelsSpacing
+    },
+    line: {
+      display: 'flex'
+    },
+    button: {
+      marginTop: '1rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/cy/components/FlashAlert/index.test.js

@@ -18,6 +18,10 @@ var _enzyme = require("enzyme");
 
 var _index = _interopRequireWildcard(require("../FlashAlert/index.js"));
 
+var _uiMotion = require("@instructure/ui-motion");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
 describe('FlashAlert', function () {
   var renderSpy;
   var clock;
@@ -55,20 +59,20 @@ describe('FlashAlert', function () {
   });
   it('renders Transition component', function () {
     var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
-    var transition = screen.find('Transition').first();
+    var transition = screen.find(_uiMotion.Transition).first();
     (0, _chai.expect)(transition).to.exist;
     (0, _chai.expect)(transition.prop('transitionOnMount')).to.be.true;
     (0, _chai.expect)(transition.prop('in')).to.be.true;
     (0, _chai.expect)(transition.prop('type')).to.eq('fade');
     clock.tick(_index.defaultTimeout);
     screen.update();
-    var transition2 = screen.find('Transition').at(1);
+    var transition2 = screen.find(_uiMotion.Transition).at(1);
     (0, _chai.expect)(transition2.prop('in')).to.be.false;
   });
   it('renders Alert component', function () {
     var props = makeProps({});
     var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var alert = screen.find('Alert');
+    var alert = screen.find(_uiAlerts.Alert);
     (0, _chai.expect)(alert).to.exist;
     (0, _chai.expect)(alert.prop('variant')).to.eq(props.variant);
     (0, _chai.expect)(alert.prop('renderCloseButtonLabel')).to.eq('Close');

package/lib/translated/cy/components/OutcomeCheckbox/__tests__/index.test.js

@@ -14,6 +14,10 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiLink = require("@instructure/ui-link");
+
 describe('OutcomeCheckbox', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -32,15 +36,15 @@ describe('OutcomeCheckbox', function () {
   }
 
   it('renders a checkbox', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox)).to.have.length(1);
   });
   it('renders outcome title in link', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var link = wrapper.find('Link');
+    var link = wrapper.find(_uiLink.Link);
     (0, _chai.expect)(link.text()).to.equal('The student will make cupcakes');
   });
   it('renders friendly description', function () {
@@ -69,7 +73,7 @@ describe('OutcomeCheckbox', function () {
   it('will focus an outcome when the title is clicked', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var click = wrapper.find('Link').prop('onClick');
+    var click = wrapper.find(_uiLink.Link).prop('onClick');
 
     var preventDefault = _sinon.default.stub();
 
@@ -85,10 +89,10 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox).prop('checked')).to.equal(false);
   });
   it('does not select the checkbox when not isOutcomeSelected', function () {
     var isOutcomeSelected = _sinon.default.stub().withArgs(101).returns(true);
@@ -96,10 +100,10 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox).prop('checked')).to.equal(true);
   });
   it('calls selectOutcomeIds when unselected and user clicks', function () {
     var isOutcomeSelected = _sinon.default.stub().withArgs(101).returns(false);
@@ -107,10 +111,11 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(_uiCheckbox.Checkbox).prop('onChange');
+    change();
     (0, _chai.expect)(props.selectOutcomeIds.calledWith([101]));
   });
   it('calls deselectOutcomeIds when selected and user clicks', function () {
@@ -119,10 +124,11 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(_uiCheckbox.Checkbox).prop('onChange');
+    change();
     (0, _chai.expect)(props.deselectOutcomeIds.calledWith([101]));
   });
   it('meets a11y standards', function () {

package/lib/translated/cy/components/OutcomeCheckbox/index.js

@@ -25,31 +25,21 @@ var _uiLink = require("@instructure/ui-link");
 
 var _uiCheckbox = require("@instructure/ui-checkbox");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _shapes = require("../../store/shapes.js");
 
 var _index = _interopRequireDefault(require("../OutcomeDescription/index.js"));
 
 var _uiView = require("@instructure/ui-view");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-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 = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeCheckbox = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeCheckbox, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeCheckbox);
@@ -83,52 +73,53 @@ var OutcomeCheckbox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var id = outcome.id,
           description = outcome.description,
           title = outcome.title;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "OutcomeSelector ".concat(styles.checkbox)
-      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkbox,
+        className: "OutcomeSelector"
+      }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
         value: id,
         checked: this.selected(),
         onChange: function onChange() {
           return _this.toggleOutcomeSelection();
         },
-        label: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.checkboxLabel
-        }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        label: (0, _emotion.jsx)("div", {
+          css: this.props.styles.checkboxLabel
+        }, (0, _emotion.jsx)(_uiLink.Link, {
           onClick: function onClick(e) {
             e.preventDefault();
 
             _this.props.setFocusedOutcome(outcome);
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.linkText,
+        }, (0, _emotion.jsx)("span", {
+          css: this.props.styles.linkText,
           "data-automation": "outcomeCheckbox__outcomeName"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.innerLinkText
+        }, (0, _emotion.jsx)("span", {
+          css: this.props.styles.innerLinkText
         }, title)))))
-      }), outcome.friendly_description && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.checkboxFriendlyDescription
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }), outcome.friendly_description && (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkboxFriendlyDescription
+      }, (0, _emotion.jsx)(_uiView.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.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         weight: "bold"
-      }, "Disgrifiad Cyfeillgar")), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, "Disgrifiad Cyfeillgar")), (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 x-small x-small",
         background: "secondary",
         "data-automation": "outcomeCheckbox__friendly_description_expanded"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
-      }, outcome.friendly_description))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.checkboxDescription
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, outcome.friendly_description))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkboxDescription
+      }, (0, _emotion.jsx)(_index.default, {
         description: description,
         maxLines: 2
       })));
@@ -141,6 +132,7 @@ var OutcomeCheckbox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   setFocusedOutcome: _propTypes.default.func.isRequired,
   isOutcomeSelected: _propTypes.default.func.isRequired,
   selectOutcomeIds: _propTypes.default.func.isRequired,
-  deselectOutcomeIds: _propTypes.default.func.isRequired
+  deselectOutcomeIds: _propTypes.default.func.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = OutcomeCheckbox;

package/lib/translated/cy/components/OutcomeCheckbox/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/cy/components/OutcomeDescription/__tests__/index.test.js

@@ -14,6 +14,8 @@ var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
 var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
 
+var _uiText = require("@instructure/ui-text");
+
 describe('OutcomeDescription', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -68,7 +70,7 @@ describe('OutcomeDescription', function () {
       truncated: false
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var text = wrapper.find('Text').at(1);
+    var text = wrapper.find(_uiText.Text).at(1);
     (0, _chai.expect)(text.text()).to.match(/Outcome Friendly Description/);
   });
   it('does not render a friendly description if not expanded', function () {
@@ -76,8 +78,8 @@ describe('OutcomeDescription', function () {
       friendlyDescription: 'Outcome Friendly Description'
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find('Text')).to.have.length(1);
-    var text = wrapper.find('Text').at(0);
+    (0, _chai.expect)(wrapper.find(_uiText.Text)).to.have.length(1);
+    var text = wrapper.find(_uiText.Text).at(0);
     (0, _chai.expect)(text.text()).not.to.match(/Outcome Friendly Description/);
   });
   it('renders the ratings if expanded', function () {

package/lib/translated/cy/components/OutcomeDescription/index.js

@@ -40,7 +40,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(_constants.NEW_DECAYING_AVERAGE_FF);
   var descriptionDisplay = !canManageOutcomes && friendlyDescription ? friendlyDescription : description;
 
   var stripHtmlTags = function stripHtmlTags(text) {
@@ -61,6 +63,35 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
     return /*#__PURE__*/_react.default.createElement(_uiText.Text, null, renderedText);
   };
 
+  var renderUserFacingMethod = function renderUserFacingMethod(calculationMethod) {
+    var displayMethod = _constants.DECAYING_AVERAGE;
+    var percent = calculationInt.decaying_average_percent;
+
+    if (newDecayingAvgFFEnabled) {
+      switch (calculationMethod) {
+        case _constants.DECAYING_AVERAGE:
+          {
+            displayMethod = _constants.WEIGHTED_AVERAGE;
+            percent = calculationInt.decaying_average_percent;
+            break;
+          }
+
+        case _constants.STANDARD_DECAYING_AVERAGE:
+          {
+            displayMethod = _constants.STANDARD_DECAYING_AVERAGE;
+            percent = calculationInt.standard_decaying_average_percent;
+            break;
+          }
+      }
+    }
+
+    var complement = 100 - percent;
+    return (0, _formatMessage.default)(_constants.CALCULATION_METHODS[displayMethod], {
+      percent: percent,
+      complement: complement
+    });
+  };
+
   var formatCalculationMethodText = function formatCalculationMethodText() {
     var method = '';
 
@@ -93,13 +124,10 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
         }
 
       case _constants.DECAYING_AVERAGE:
+      case _constants.STANDARD_DECAYING_AVERAGE:
         {
-          var percent = calculationInt.decaying_average_percent;
-          var complement = 100 - percent;
-          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.DECAYING_AVERAGE], {
-            percent: percent,
-            complement: complement
-          });
+          method = renderUserFacingMethod(calculationMethod);
+          break;
         }
     }
 
@@ -107,7 +135,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
   };
 
   var renderFriendlyDescription = function renderFriendlyDescription() {
-    return friendlyDescription && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    return friendlyDescription && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
       as: "div",
       margin: "x-small small 0 0",
       padding: "small small x-small small",
@@ -151,7 +179,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
     }, formatCalculationMethodText()))));
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && canManageOutcomes && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+  return /*#__PURE__*/_react.default.createElement("div", null, label && canManageOutcomes && /*#__PURE__*/_react.default.createElement(_uiView.View, {
     as: "div",
     margin: "0 0 xx-small"
   }, renderText(label, 'middle')), !truncated && canManageOutcomes && renderFriendlyDescription(), description && /*#__PURE__*/_react.default.createElement(_uiView.View, {
@@ -174,7 +202,8 @@ OutcomeDescription.propTypes = {
   ratings: _propTypes.default.arrayOf(_shapes.scoringTierShape),
   truncated: _propTypes.default.bool,
   isTray: _propTypes.default.bool,
-  canManageOutcomes: _propTypes.default.bool
+  canManageOutcomes: _propTypes.default.bool,
+  features: _propTypes.default.array
 };
 OutcomeDescription.defaultProps = {
   label: '',
@@ -189,7 +218,8 @@ OutcomeDescription.defaultProps = {
   pointsPossible: null,
   ratings: [],
   truncated: true,
-  canManageOutcomes: true
+  canManageOutcomes: true,
+  features: []
 };
 var _default = OutcomeDescription;
 exports.default = _default;