@instructure/outcomes-ui 2.1.0 → 2.1.3

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

@@ -8,13 +8,13 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { Button, IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
+import { IconArrowOpenEndLine, IconArrowOpenDownLine, IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
 import { List } from '@instructure/ui-list';
 import { themeable } from '@instructure/ui-themeable';
 import OutcomePickerModal from "../OutcomePickerModal/index.js";
-import AlignmentItem from "./AlignmentItem/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";
@@ -32,31 +32,62 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
 
   var _super = _createSuper(AlignmentButton);
 
-  function AlignmentButton() {
+  function AlignmentButton(props) {
     var _this;
 
     _classCallCheck(this, AlignmentButton);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _this = _super.call(this, props);
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this.toggleAlignmentList = function () {
+      _this.setState(function (prevState) {
+        return {
+          renderCollapsed: !prevState.renderCollapsed
+        };
+      });
+    };
 
     _this.renderHeader = function () {
       var _this$props = _this.props,
-          readOnly = _this$props.readOnly,
+          canManageOutcomes = _this$props.canManageOutcomes,
           alignedOutcomes = _this$props.alignedOutcomes;
+      var renderCollapsed = _this.state.renderCollapsed;
+      var enableToggleAction = alignedOutcomes.length > 0;
 
-      if (!readOnly || alignedOutcomes.length) {
+      if (!enableToggleAction) {
+        _this.setState({
+          renderCollapsed: true
+        });
+      }
+
+      if (canManageOutcomes || alignedOutcomes.length) {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.line,
-          "data-automation": "outcomeLabel__alignedOutcomes"
+          "data-automation": "outcomeLabel__alignedOutcomes",
+          style: {
+            'align-items': 'center'
+          }
         }, /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
-        }, /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            'padding-right': '0.5em'
+          }
+        }, /*#__PURE__*/React.createElement(IconButton, {
+          size: "small",
+          screenReaderLabel: renderCollapsed ? "Expand the list of aligned Outcomes" : "Collapse the list of aligned Outcomes",
+          withBackground: false,
+          withBorder: false,
+          interaction: enableToggleAction ? 'enabled' : 'disabled',
+          onClick: _this.toggleAlignmentList,
+          "data-automation": "alignmentButton__collapseButton"
+        }, renderCollapsed ? /*#__PURE__*/React.createElement(IconArrowOpenEndLine, {
+          "data-testid": "icon-arrow-right"
+        }) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, {
+          "data-testid": "icon-arrow-down"
+        }))), /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
@@ -67,28 +98,33 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     };
 
     _this.renderAlignmentList = function () {
+      if (_this.state.renderCollapsed) {
+        return;
+      }
+
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          readOnly = _this$props2.readOnly;
+          canManageOutcomes = _this$props2.canManageOutcomes;
       return /*#__PURE__*/React.createElement(List, {
         isUnstyled: true,
         margin: "small 0",
         delimiter: "solid"
-      }, alignedOutcomes.map(function (outcome, index) {
+      }, alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+        key: "delimiter-0"
+      }), alignedOutcomes.map(function (outcome, index) {
         return /*#__PURE__*/React.createElement(List.Item, {
-          margin: "small 0",
+          padding: "0 small 0 medium",
           key: outcome.id
         }, /*#__PURE__*/React.createElement(AlignmentItem, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
-          ref: function ref(o) {
-            _this["position".concat(index)] = o;
-          } // eslint-disable-line immutable/no-mutation
-          ,
           outcome: outcome,
-          readOnly: readOnly
+          canManageOutcomes: canManageOutcomes,
+          shouldFocus: index === _this.state.focusedItem
         }));
+      }), alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+        key: "delimiter-1"
       }));
     };
 
@@ -110,9 +146,9 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     _this.renderButton = function () {
       var _this$props4 = _this.props,
           openOutcomePicker = _this$props4.openOutcomePicker,
-          readOnly = _this$props4.readOnly;
+          canManageOutcomes = _this$props4.canManageOutcomes;
 
-      if (!readOnly) {
+      if (canManageOutcomes) {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.button
         }, /*#__PURE__*/React.createElement(Button, {
@@ -129,6 +165,10 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       }
     };
 
+    _this.state = {
+      renderCollapsed: true,
+      focusedItem: null
+    };
     return _this;
   }
 
@@ -152,15 +192,19 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           alignedOutcomes = _this$props5.alignedOutcomes;
       removeAlignment(removedOutcome.id, onUpdate, true);
       this.props.screenreaderNotification(removedOutcome.label + " alignement supprim\xE9");
-      var priorListItem = this["position".concat(index - 1)];
+      var priorIndex = index - 1;
 
-      if (priorListItem) {
-        priorListItem.focus();
+      if (priorIndex >= 0) {
+        this.setState({
+          focusedItem: priorIndex
+        });
       } else if (alignedOutcomes.length > 0) {
-        var nextListItem = this["position".concat(index + 1)];
+        var nextIndex = index + 1;
 
-        if (nextListItem) {
-          nextListItem.focus();
+        if (nextIndex < alignedOutcomes.length) {
+          this.setState({
+            focusedItem: nextIndex
+          });
         }
       }
     }
@@ -183,13 +227,13 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   onUpdate: PropTypes.func,
   screenreaderNotification: PropTypes.func,
   liveRegion: OutcomePickerModal.propTypes.liveRegion,
-  readOnly: PropTypes.bool.isRequired
+  canManageOutcomes: PropTypes.bool.isRequired
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
   onUpdate: null,
   screenreaderNotification: null,
   liveRegion: null,
-  readOnly: false
+  canManageOutcomes: true
 }, _temp)) || _class);
 export { AlignmentButton as default };

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

@@ -0,0 +1,172 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+import AlignmentItem from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('AlignmentItem', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '1',
+        label: 'A1',
+        title: 'tA1',
+        description: 'dA1'
+      },
+      removeAlignment: sinon.spy(),
+      canManageOutcomes: true,
+      isTray: false,
+      shouldFocus: false,
+      isOutcomeSelected: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy()
+    }, props);
+  }
+
+  it('renders title', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+    expect(wrapper.find('Text')).to.have.length(1);
+  });
+  it('includes an OutcomeDescription', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('includes a trash icon and delete button if in the alignment list', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('IconTrashLine')).to.have.length(1);
+    expect(wrapper.find('IconButton')).to.have.length(2);
+  });
+  it('does not include a trash icon and delete button if in the outcome tray', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      isTray: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('IconTrashLine')).to.have.length(0);
+    expect(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('does not include a trash icon and delete button when canManageOutcomes is false', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      canManageOutcomes: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('IconTrashLine')).to.have.length(0);
+    expect(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('focuses on the trash can icon if shouldFocus is true', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+    wrapper.setProps(_objectSpread({}, makeProps({
+      shouldFocus: true
+    })));
+    expect(wrapper.getDOMNode().contains(document.activeElement));
+  });
+  it('does not focus on the trash can icon if shouldFocus is false', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+    wrapper.setProps(_objectSpread({}, makeProps()));
+    expect(wrapper.getDOMNode().contains(document.activeElement)).to.be.false;
+  });
+  it('calls removeAlignment when the trash icon is clicked', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('IconButton').at(1).simulate('click');
+    expect(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('includes a checkbox if in the outcome tray', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      isTray: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox')).to.have.length(1);
+  });
+  it('does not include a checkbox if in the alignment list', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox')).to.have.length(0);
+  });
+  it('handles click on checkbox', function () {
+    var props = makeProps({
+      isTray: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props));
+    wrapper.find('Checkbox').simulate('click');
+    expect(props.isOutcomeSelected.calledOnce).to.be.true;
+  });
+  it('selects the checkbox when isOutcomeSelected', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(1).returns(false);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+  });
+  it('does not select the checkbox when not isOutcomeSelected', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(1).returns(true);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+  });
+  it('calls selectOutcomeIds when unselected and user clicks', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(1).returns(false);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Checkbox').simulate('change');
+    expect(props.selectOutcomeIds.calledWith([1]));
+  });
+  it('calls deselectOutcomeIds when selected and user clicks', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(1).returns(true);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Checkbox').simulate('change');
+    expect(props.deselectOutcomeIds.calledWith([1]));
+  });
+  it('shows the popover when the item is truncated', function () {
+    var widget = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+    expect(widget.find('Popover')).to.have.length(1);
+    var tray = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      isTray: true
+    })));
+    expect(tray.find('Popover')).to.have.length(1);
+  });
+  it('does not show the popover when the item is expanded', function () {
+    var widget = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+    widget.find('IconButton').at(0).simulate('click');
+    expect(widget.find('Popover')).to.have.length(0);
+    var tray = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      isTray: true
+    })));
+    tray.find('IconButton').at(0).simulate('click');
+    expect(tray.find('Popover')).to.have.length(0);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+  });
+});

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

@@ -0,0 +1,185 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
+import { IconArrowOpenDownLine, IconArrowOpenEndLine, IconTrashLine } from '@instructure/ui-icons';
+import { IconButton } from '@instructure/ui-buttons';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Popover } from '@instructure/ui-popover';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import { View } from '@instructure/ui-view';
+import OutcomeDescription from "../OutcomeDescription/index.js";
+import { outcomeShape } from "../../store/shapes.js";
+
+var AlignmentItem = function AlignmentItem(_ref) {
+  var outcome = _ref.outcome,
+      removeAlignment = _ref.removeAlignment,
+      canManageOutcomes = _ref.canManageOutcomes,
+      isTray = _ref.isTray,
+      shouldFocus = _ref.shouldFocus,
+      isOutcomeSelected = _ref.isOutcomeSelected,
+      selectOutcomeIds = _ref.selectOutcomeIds,
+      deselectOutcomeIds = _ref.deselectOutcomeIds;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      truncated = _useState2[0],
+      setTruncated = _useState2[1];
+
+  var id = outcome.id,
+      label = outcome.label,
+      title = outcome.title,
+      description = outcome.description;
+  var trashIconRef = useRef();
+
+  var toggleExpandOutcomeDetails = function toggleExpandOutcomeDetails() {
+    return setTruncated(function (prevState) {
+      return !prevState;
+    });
+  };
+
+  useEffect(function () {
+    if (shouldFocus) {
+      var _trashIconRef$current;
+
+      (_trashIconRef$current = trashIconRef.current) === null || _trashIconRef$current === void 0 ? void 0 : _trashIconRef$current.focus();
+    }
+  }, [shouldFocus]);
+
+  var toggleOutcomeSelection = function toggleOutcomeSelection() {
+    if (isOutcomeSelected(id)) {
+      deselectOutcomeIds([id]);
+    } else {
+      selectOutcomeIds([id]);
+    }
+  };
+
+  var renderTitleText = function renderTitleText(size, weight) {
+    return /*#__PURE__*/React.createElement(Text, {
+      size: size,
+      weight: weight,
+      wrap: "break-word"
+    }, title);
+  };
+
+  var renderOutcomeTitle = function renderOutcomeTitle() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
+      },
+      "data-automation": "alignmentItem__outcomeName"
+    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title), /*#__PURE__*/React.createElement(TruncateText, {
+      position: "middle"
+    }, renderTitleText('medium', 'bold'), /*#__PURE__*/React.createElement("span", null))) : renderTitleText('medium', 'bold'));
+  };
+
+  var renderDeleteButton = function renderDeleteButton() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '0.2rem 0 0'
+      },
+      "data-automation": "outcomeAlignmentItem__delete"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      size: "small",
+      withBackground: false,
+      withBorder: false,
+      screenReaderLabel: "Supprimer " + title,
+      onClick: removeAlignment,
+      ref: trashIconRef
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement(IconTrashLine, null))));
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "x-small 0"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    alignItems: "start"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "div",
+    size: isTray ? '4.5rem' : '2rem'
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0.3125rem 0'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, isTray && /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "div",
+    padding: "0 0 0 xx-small"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "OutcomeSelector"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "Select outcome " + title),
+    value: "medium",
+    checked: isOutcomeSelected(id),
+    onChange: toggleOutcomeSelection
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "div"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    screenReaderLabel: truncated ? "Expand description for outcome " + title : "Collapse description for outcome " + title,
+    withBackground: false,
+    withBorder: false,
+    onClick: toggleExpandOutcomeDetails
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignSelf: 'center',
+      fontSize: '0.875rem'
+    }
+  }, truncated ? /*#__PURE__*/React.createElement(IconArrowOpenEndLine, null) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    alignItems: "center",
+    size: "50%",
+    shouldGrow: true
+  }, truncated ? /*#__PURE__*/React.createElement(Popover, {
+    renderTrigger: renderOutcomeTitle(),
+    color: "primary-inverse",
+    placement: "top start",
+    offsetY: '-10rem'
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    maxWidth: "19rem",
+    padding: "small"
+  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    alignItems: "start"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    size: isTray ? '4.5rem' : '2.3rem'
+  }), /*#__PURE__*/React.createElement(Flex.Item, {
+    size: "80%"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "0 0 x-small"
+  }, /*#__PURE__*/React.createElement(OutcomeDescription, {
+    label: label,
+    description: description
+  })))));
+};
+
+AlignmentItem.propTypes = {
+  outcome: outcomeShape.isRequired,
+  removeAlignment: PropTypes.func,
+  canManageOutcomes: PropTypes.bool,
+  isTray: PropTypes.bool,
+  shouldFocus: PropTypes.bool,
+  isOutcomeSelected: PropTypes.func,
+  selectOutcomeIds: PropTypes.func,
+  deselectOutcomeIds: PropTypes.func
+};
+AlignmentItem.defaultProps = {
+  removeAlignment: function removeAlignment() {},
+  canManageOutcomes: true,
+  isTray: false,
+  shouldFocus: false,
+  isOutcomeSelected: function isOutcomeSelected() {},
+  selectOutcomeIds: function selectOutcomeIds() {},
+  deselectOutcomeIds: function deselectOutcomeIds() {}
+};
+export default AlignmentItem;

package/es/translated/fr/components/AlignmentItem/index.stories.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import { basicOutcome } from "../../../.storybook/constants.js";
+import AlignmentItem from "./index.js";
+export default {
+  title: 'AlignmentItem'
+};
+
+var noOp = function noOp() {};
+
+export var alignment = function alignment() {
+  return /*#__PURE__*/React.createElement(AlignmentItem, {
+    outcome: object('Outcome', basicOutcome),
+    removeAlignment: noOp,
+    readOnly: false,
+    isTray: false,
+    setFocusedOutcome: noOp,
+    isOutcomeSelected: noOp,
+    selectOutcomeIds: noOp,
+    deselectOutcomeIds: noOp
+  });
+};
+export var readOnlyAlignment = function readOnlyAlignment() {
+  return /*#__PURE__*/React.createElement(AlignmentItem, {
+    outcome: object('Outcome', basicOutcome),
+    removeAlignment: noOp,
+    readOnly: true,
+    isTray: false,
+    setFocusedOutcome: noOp,
+    isOutcomeSelected: noOp,
+    selectOutcomeIds: noOp,
+    deselectOutcomeIds: noOp
+  });
+};
+export var outcome = function outcome() {
+  return /*#__PURE__*/React.createElement(AlignmentItem, {
+    outcome: object('Outcome', basicOutcome),
+    removeAlignment: noOp,
+    readOnly: false,
+    isTray: true,
+    setFocusedOutcome: noOp,
+    isOutcomeSelected: noOp,
+    selectOutcomeIds: noOp,
+    deselectOutcomeIds: noOp
+  });
+};

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

@@ -97,7 +97,7 @@ var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       }, /*#__PURE__*/React.createElement(Text, {
         size: "x-small",
         weight: "bold"
-      }, "Friendly Description")), /*#__PURE__*/React.createElement(View, {
+      }, "Description conviviale")), /*#__PURE__*/React.createElement(View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 x-small x-small",
@@ -108,7 +108,8 @@ var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       }, outcome.friendly_description))), /*#__PURE__*/React.createElement("div", {
         className: styles.checkboxDescription
       }, /*#__PURE__*/React.createElement(OutcomeDescription, {
-        description: description
+        description: description,
+        maxLines: 2
       })));
     }
   }]);

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

@@ -7,8 +7,7 @@ describe('OutcomeDescription', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
-      description: 'Hello there',
-      truncate: true
+      description: 'Hello there'
     }, props);
   }
 
@@ -34,6 +33,13 @@ describe('OutcomeDescription', function () {
     });
     expect(wrapper.find('TruncateText')).to.have.length(1);
   });
+  it('renders outcome label and description', function () {
+    var props = makeProps({
+      label: 'Outcome label'
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
+    expect(wrapper.text()).to.match(/Outcome labelHello there/);
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomeDescription, makeProps()));
   });