@instructure/outcomes-ui 3.2.1 → 3.2.2

package/es/translated/de/components/OutcomeLabels/__tests__/index.test.js

@@ -52,6 +52,28 @@ describe('OutcomeLabels', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
     expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }, {
+        id: '2',
+        label: 'DEF',
+        title: 'Title2',
+        decorator: 'HIDE'
+      }, {
+        id: '3',
+        label: 'GHI',
+        title: 'Title3',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomeLabels, makeProps()));
   });

package/es/translated/de/components/OutcomeLabels/index.js

@@ -40,6 +40,9 @@ var OutcomeLabels = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       var _this$props = this.props,
         outcomes = _this$props.outcomes,
         emptyText = _this$props.emptyText;
+      var filteredOutcomes = outcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
       return jsx("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeLabel__alignedOutcomes",
@@ -50,8 +53,8 @@ var OutcomeLabels = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         size: "small"
       }, jsx("div", {
         css: this.props.styles.text
-      }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
-        return _this2.wrap(o.title, i < outcomes.length - 1);
+      }, filteredOutcomes.length === 0 ? emptyText : filteredOutcomes.map(function (o, i) {
+        return _this2.wrap(o.title, i < filteredOutcomes.length - 1);
       }))));
     }
   }]);

package/es/translated/de/components/OutcomeTags/__tests__/index.test.js

@@ -22,6 +22,11 @@ describe('OutcomeTags', function () {
       id: '3',
       label: 'GHI',
       title: 'Title3'
+    }, {
+      id: '4',
+      label: 'JKL',
+      title: 'Title4',
+      decorator: 'HIDE'
     }];
     return Object.assign({
       outcomes: outcomes,
@@ -55,6 +60,14 @@ describe('OutcomeTags', function () {
     expect(text.match(/Title2/)).to.be.truthy;
     expect(text.match(/Title3/)).to.be.truthy;
   });
+  it('does not render outcome titles for hidden outcomes', function () {
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var text = wrapper.text();
+    expect(text.match(/Title1/)).to.be.truthy;
+    expect(text.match(/Title2/)).to.be.truthy;
+    expect(text.match(/Title3/)).to.be.truthy;
+    expect(text.match(/Title4/)).to.be.falsey;
+  });
   it('does not render outcome labels', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
     var text = wrapper.text();
@@ -69,6 +82,18 @@ describe('OutcomeTags', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, props));
     expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('focuses on the prior tag when current tag deleted', function (done) {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
     setTimeout(function () {

package/es/translated/de/components/OutcomeTags/index.js

@@ -47,6 +47,8 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       var outcomes = this.props.outcomes;
       return outcomes.sort(function (a, b) {
         return a.title ? a.title.localeCompare(b.title) : -1;
+      }).filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
       });
     }
   }, {
@@ -103,6 +105,7 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }, {
     key: "render",
     value: function render() {
+      var sortedOutcomes = this.getSortedOutcomes();
       return jsx("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeTag__alignedOutcomes"
@@ -110,7 +113,7 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         size: "medium"
       }, jsx(IconOutcomesLine, null)), jsx("div", {
         css: this.props.styles.tags
-      }, this.props.outcomes.length ? this.renderTags() : this.renderEmpty()));
+      }, sortedOutcomes.length ? this.renderTags() : this.renderEmpty()));
     }
   }]);
   OutcomeTags.displayName = "OutcomeTags";

package/es/translated/de/services/OutcomesService.js

@@ -91,14 +91,14 @@ var decorateAlignments = function decorateAlignments(alignmentSet, launchContext
     }
   });
 
-  // Now that the outcomes are populated with the decorator, sort by title,
-  // filter out those that we need to hide, then sort by decorator.
+  // Now that the outcomes are populated with the decorator, sort by title then sort by decorator.
+  // The various components will need to filter out those that are hidden, but they need to be
+  // returned and stored in the redux store to prevent them from getting unaligned when the
+  // alignment set is mutated.
   alignmentSet.outcomes = outcomes.sort(function (a, b) {
     var titleA = a && a.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     var titleB = b && b.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     return titleA.localeCompare(titleB);
-  }).filter(function (outcome) {
-    return outcome.decorator !== HIDE;
   }).sort(byDecorator);
   return alignmentSet;
 };

package/es/translated/de/services/__tests__/OutcomesService.test.js

@@ -609,7 +609,8 @@ describe('OutcomesService', function () {
         var alignments = getResponse('course', courseUuid, false);
         mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
         return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
-          expect(result.outcomes).to.have.length(0);
+          expect(result.outcomes).to.have.length(1);
+          expect(result.outcomes[0].decorator).to.equal('HIDE');
         });
       });
       it('when outcome not in the course, decorate with not in the course', function () {
@@ -757,14 +758,14 @@ describe('OutcomesService', function () {
       mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
       return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
         // 4, 2, 6 are in launch context (4 2 6 because 'Course...', 'Root...', 'Sub..' alphabetically)
-        // 3 is a course outcome not in launch context, so it is filtered out
         // 1 and 5  are account outcomes not in the course
+        // 3 is a course outcome not in launch context, so it will be hidden
         expect(result.outcomes.map(function (o) {
           return o.id;
-        })).to.deep.equal(['4', '2', '6', '1', '5']);
+        })).to.deep.equal(['4', '2', '6', '1', '5', '3']);
         expect(result.outcomes.map(function (o) {
           return o.decorator;
-        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE']);
+        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE', 'HIDE']);
       });
     });
     it('sort order for when launch context is sub-account', function () {

package/es/translated/de/store/alignments/__tests__/selectors.test.js

@@ -67,6 +67,30 @@ describe('alignments/selectors', function () {
       var count = getAlignedOutcomeCount(state, 'anotherScope');
       expect(count).to.equal(0);
     });
+    it('does not count hidden outcomes', function () {
+      var newState = fromJS({
+        scopeForTest: {
+          alignments: {
+            alignedOutcomes: [{
+              id: '102',
+              label: 'l2',
+              title: 't1',
+              decorator: 'HIDE'
+            }, {
+              id: '101',
+              label: 'l1',
+              title: 't2'
+            }, {
+              id: '103',
+              label: 'l3',
+              title: 't3'
+            }]
+          }
+        }
+      });
+      var count = getAlignedOutcomeCount(newState, 'scopeForTest');
+      expect(count).to.equal(2);
+    });
   });
   describe('makeIsOpen', function () {
     it('returns true if alignment id is openAlignmentId', function () {

package/es/translated/de/store/alignments/selectors.js

@@ -60,7 +60,9 @@ export var getAlignedOutcomeIds = createSelector(getAlignedOutcomes, function (o
 });
 export function getAlignedOutcomeCount(state, scope) {
   if (state && restrict(state, scope).get('alignedOutcomes')) {
-    return restrict(state, scope).get('alignedOutcomes').size;
+    return restrict(state, scope).get('alignedOutcomes').filter(function (outcome) {
+      return outcome.toJS().decorator !== 'HIDE';
+    }).size;
   }
   return 0;
 }

package/es/translated/en/components/Alignment/__tests__/index.test.js

@@ -84,11 +84,11 @@ describe('Alignment', function () {
       var pill = wrapper.find(Pill).last();
       expect(pill).to.have.length(0);
     });
-    it('does not decorate if decorator is HIDE', function () {
+    it('does not render if decorator is HIDE', function () {
       var props = getDecoratedOutcome('HIDE');
       var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props));
-      var pill = wrapper.find(Pill).last();
-      expect(pill).to.have.length(0);
+      var text = wrapper.find(Text).last();
+      expect(text).to.have.length(0);
     });
     it('decorates if decorator is SUB_ACCOUNT_OUTCOME', function () {
       var props = getDecoratedOutcome('SUB_ACCOUNT_OUTCOME');

package/es/translated/en/components/Alignment/index.js

@@ -103,7 +103,7 @@ var Alignment = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       if (index !== 0) {
         itemStyle.push(this.props.styles.itemSeparator);
       }
-      return jsx("li", {
+      return outcome.decorator !== 'HIDE' && jsx("li", {
         css: itemStyle,
         "data-automation": "outcomeAlignment__item"
       }, jsx("span", {

package/es/translated/en/components/AlignmentList/__tests__/index.test.js

@@ -217,4 +217,30 @@ describe('AlignmentList', function () {
       return checkA11y( /*#__PURE__*/React.createElement(AlignmentList, makeProps()));
     });
   });
+  describe('outcome decoration', function () {
+    it('behaves as empty if all outcomes are hidden', function () {
+      var props = makeProps({
+        alignedOutcomes: [{
+          id: '1',
+          label: 'A1',
+          title: 'tA1',
+          decorator: 'HIDE'
+        }, {
+          id: '2',
+          label: 'B2',
+          title: 'tB2',
+          decorator: 'HIDE'
+        }, {
+          id: '3',
+          label: 'C3',
+          title: 'tC3',
+          decorator: 'HIDE'
+        }]
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
+        disableLifecycleMethods: true
+      });
+      expect(wrapper.find(Billboard)).to.have.length(1);
+    });
+  });
 });

package/es/translated/en/components/AlignmentList/index.js

@@ -193,10 +193,9 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     }
   }, {
     key: "renderList",
-    value: function renderList() {
+    value: function renderList(filteredOutcomes) {
       var _this3 = this;
       var _this$props2 = this.props,
-        alignedOutcomes = _this$props2.alignedOutcomes,
         _viewAlignment = _this$props2.viewAlignment,
         closeAlignment = _this$props2.closeAlignment,
         isOpen = _this$props2.isOpen,
@@ -207,7 +206,7 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         scope = _this$props2.scope;
       return jsx("div", null, jsx("ul", {
         css: this.props.styles.list
-      }, alignedOutcomes.map(function (outcome, index) {
+      }, filteredOutcomes.map(function (outcome, index) {
         return jsx(Alignment, {
           key: outcome.id,
           ref: function ref(o) {
@@ -255,8 +254,11 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     key: "renderBody",
     value: function renderBody() {
       var alignedOutcomes = this.props.alignedOutcomes;
-      if (alignedOutcomes && alignedOutcomes.length > 0) {
-        return this.renderList();
+      var filteredOutcomes = alignedOutcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
+      if (filteredOutcomes && filteredOutcomes.length > 0) {
+        return this.renderList(filteredOutcomes);
       } else {
         return this.renderEmpty();
       }

package/es/translated/en/components/OutcomeLabels/__tests__/index.test.js

@@ -52,6 +52,28 @@ describe('OutcomeLabels', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
     expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }, {
+        id: '2',
+        label: 'DEF',
+        title: 'Title2',
+        decorator: 'HIDE'
+      }, {
+        id: '3',
+        label: 'GHI',
+        title: 'Title3',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomeLabels, makeProps()));
   });

package/es/translated/en/components/OutcomeLabels/index.js

@@ -40,6 +40,9 @@ var OutcomeLabels = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       var _this$props = this.props,
         outcomes = _this$props.outcomes,
         emptyText = _this$props.emptyText;
+      var filteredOutcomes = outcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
       return jsx("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeLabel__alignedOutcomes",
@@ -50,8 +53,8 @@ var OutcomeLabels = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         size: "small"
       }, jsx("div", {
         css: this.props.styles.text
-      }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
-        return _this2.wrap(o.title, i < outcomes.length - 1);
+      }, filteredOutcomes.length === 0 ? emptyText : filteredOutcomes.map(function (o, i) {
+        return _this2.wrap(o.title, i < filteredOutcomes.length - 1);
       }))));
     }
   }]);

package/es/translated/en/components/OutcomeTags/__tests__/index.test.js

@@ -22,6 +22,11 @@ describe('OutcomeTags', function () {
       id: '3',
       label: 'GHI',
       title: 'Title3'
+    }, {
+      id: '4',
+      label: 'JKL',
+      title: 'Title4',
+      decorator: 'HIDE'
     }];
     return Object.assign({
       outcomes: outcomes,
@@ -55,6 +60,14 @@ describe('OutcomeTags', function () {
     expect(text.match(/Title2/)).to.be.truthy;
     expect(text.match(/Title3/)).to.be.truthy;
   });
+  it('does not render outcome titles for hidden outcomes', function () {
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var text = wrapper.text();
+    expect(text.match(/Title1/)).to.be.truthy;
+    expect(text.match(/Title2/)).to.be.truthy;
+    expect(text.match(/Title3/)).to.be.truthy;
+    expect(text.match(/Title4/)).to.be.falsey;
+  });
   it('does not render outcome labels', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
     var text = wrapper.text();
@@ -69,6 +82,18 @@ describe('OutcomeTags', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, props));
     expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('focuses on the prior tag when current tag deleted', function (done) {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
     setTimeout(function () {

package/es/translated/en/components/OutcomeTags/index.js

@@ -47,6 +47,8 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       var outcomes = this.props.outcomes;
       return outcomes.sort(function (a, b) {
         return a.title ? a.title.localeCompare(b.title) : -1;
+      }).filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
       });
     }
   }, {
@@ -103,6 +105,7 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }, {
     key: "render",
     value: function render() {
+      var sortedOutcomes = this.getSortedOutcomes();
       return jsx("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeTag__alignedOutcomes"
@@ -110,7 +113,7 @@ var OutcomeTags = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         size: "medium"
       }, jsx(IconOutcomesLine, null)), jsx("div", {
         css: this.props.styles.tags
-      }, this.props.outcomes.length ? this.renderTags() : this.renderEmpty()));
+      }, sortedOutcomes.length ? this.renderTags() : this.renderEmpty()));
     }
   }]);
   OutcomeTags.displayName = "OutcomeTags";

package/es/translated/en/services/OutcomesService.js

@@ -91,14 +91,14 @@ var decorateAlignments = function decorateAlignments(alignmentSet, launchContext
     }
   });
 
-  // Now that the outcomes are populated with the decorator, sort by title,
-  // filter out those that we need to hide, then sort by decorator.
+  // Now that the outcomes are populated with the decorator, sort by title then sort by decorator.
+  // The various components will need to filter out those that are hidden, but they need to be
+  // returned and stored in the redux store to prevent them from getting unaligned when the
+  // alignment set is mutated.
   alignmentSet.outcomes = outcomes.sort(function (a, b) {
     var titleA = a && a.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     var titleB = b && b.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     return titleA.localeCompare(titleB);
-  }).filter(function (outcome) {
-    return outcome.decorator !== HIDE;
   }).sort(byDecorator);
   return alignmentSet;
 };

package/es/translated/en/services/__tests__/OutcomesService.test.js

@@ -609,7 +609,8 @@ describe('OutcomesService', function () {
         var alignments = getResponse('course', courseUuid, false);
         mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
         return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
-          expect(result.outcomes).to.have.length(0);
+          expect(result.outcomes).to.have.length(1);
+          expect(result.outcomes[0].decorator).to.equal('HIDE');
         });
       });
       it('when outcome not in the course, decorate with not in the course', function () {
@@ -757,14 +758,14 @@ describe('OutcomesService', function () {
       mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
       return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
         // 4, 2, 6 are in launch context (4 2 6 because 'Course...', 'Root...', 'Sub..' alphabetically)
-        // 3 is a course outcome not in launch context, so it is filtered out
         // 1 and 5  are account outcomes not in the course
+        // 3 is a course outcome not in launch context, so it will be hidden
         expect(result.outcomes.map(function (o) {
           return o.id;
-        })).to.deep.equal(['4', '2', '6', '1', '5']);
+        })).to.deep.equal(['4', '2', '6', '1', '5', '3']);
         expect(result.outcomes.map(function (o) {
           return o.decorator;
-        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE']);
+        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE', 'HIDE']);
       });
     });
     it('sort order for when launch context is sub-account', function () {

package/es/translated/en/store/alignments/__tests__/selectors.test.js

@@ -67,6 +67,30 @@ describe('alignments/selectors', function () {
       var count = getAlignedOutcomeCount(state, 'anotherScope');
       expect(count).to.equal(0);
     });
+    it('does not count hidden outcomes', function () {
+      var newState = fromJS({
+        scopeForTest: {
+          alignments: {
+            alignedOutcomes: [{
+              id: '102',
+              label: 'l2',
+              title: 't1',
+              decorator: 'HIDE'
+            }, {
+              id: '101',
+              label: 'l1',
+              title: 't2'
+            }, {
+              id: '103',
+              label: 'l3',
+              title: 't3'
+            }]
+          }
+        }
+      });
+      var count = getAlignedOutcomeCount(newState, 'scopeForTest');
+      expect(count).to.equal(2);
+    });
   });
   describe('makeIsOpen', function () {
     it('returns true if alignment id is openAlignmentId', function () {

package/es/translated/en/store/alignments/selectors.js

@@ -60,7 +60,9 @@ export var getAlignedOutcomeIds = createSelector(getAlignedOutcomes, function (o
 });
 export function getAlignedOutcomeCount(state, scope) {
   if (state && restrict(state, scope).get('alignedOutcomes')) {
-    return restrict(state, scope).get('alignedOutcomes').size;
+    return restrict(state, scope).get('alignedOutcomes').filter(function (outcome) {
+      return outcome.toJS().decorator !== 'HIDE';
+    }).size;
   }
   return 0;
 }

package/es/translated/en-AU/components/Alignment/__tests__/index.test.js

@@ -84,11 +84,11 @@ describe('Alignment', function () {
       var pill = wrapper.find(Pill).last();
       expect(pill).to.have.length(0);
     });
-    it('does not decorate if decorator is HIDE', function () {
+    it('does not render if decorator is HIDE', function () {
       var props = getDecoratedOutcome('HIDE');
       var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props));
-      var pill = wrapper.find(Pill).last();
-      expect(pill).to.have.length(0);
+      var text = wrapper.find(Text).last();
+      expect(text).to.have.length(0);
     });
     it('decorates if decorator is SUB_ACCOUNT_OUTCOME', function () {
       var props = getDecoratedOutcome('SUB_ACCOUNT_OUTCOME');

package/es/translated/en-AU/components/Alignment/index.js

@@ -103,7 +103,7 @@ var Alignment = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       if (index !== 0) {
         itemStyle.push(this.props.styles.itemSeparator);
       }
-      return jsx("li", {
+      return outcome.decorator !== 'HIDE' && jsx("li", {
         css: itemStyle,
         "data-automation": "outcomeAlignment__item"
       }, jsx("span", {

package/es/translated/en-AU/components/AlignmentList/__tests__/index.test.js

@@ -217,4 +217,30 @@ describe('AlignmentList', function () {
       return checkA11y( /*#__PURE__*/React.createElement(AlignmentList, makeProps()));
     });
   });
+  describe('outcome decoration', function () {
+    it('behaves as empty if all outcomes are hidden', function () {
+      var props = makeProps({
+        alignedOutcomes: [{
+          id: '1',
+          label: 'A1',
+          title: 'tA1',
+          decorator: 'HIDE'
+        }, {
+          id: '2',
+          label: 'B2',
+          title: 'tB2',
+          decorator: 'HIDE'
+        }, {
+          id: '3',
+          label: 'C3',
+          title: 'tC3',
+          decorator: 'HIDE'
+        }]
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
+        disableLifecycleMethods: true
+      });
+      expect(wrapper.find(Billboard)).to.have.length(1);
+    });
+  });
 });

package/es/translated/en-AU/components/AlignmentList/index.js

@@ -193,10 +193,9 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     }
   }, {
     key: "renderList",
-    value: function renderList() {
+    value: function renderList(filteredOutcomes) {
       var _this3 = this;
       var _this$props2 = this.props,
-        alignedOutcomes = _this$props2.alignedOutcomes,
         _viewAlignment = _this$props2.viewAlignment,
         closeAlignment = _this$props2.closeAlignment,
         isOpen = _this$props2.isOpen,
@@ -207,7 +206,7 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         scope = _this$props2.scope;
       return jsx("div", null, jsx("ul", {
         css: this.props.styles.list
-      }, alignedOutcomes.map(function (outcome, index) {
+      }, filteredOutcomes.map(function (outcome, index) {
         return jsx(Alignment, {
           key: outcome.id,
           ref: function ref(o) {
@@ -255,8 +254,11 @@ var AlignmentList = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     key: "renderBody",
     value: function renderBody() {
       var alignedOutcomes = this.props.alignedOutcomes;
-      if (alignedOutcomes && alignedOutcomes.length > 0) {
-        return this.renderList();
+      var filteredOutcomes = alignedOutcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
+      if (filteredOutcomes && filteredOutcomes.length > 0) {
+        return this.renderList(filteredOutcomes);
       } else {
         return this.renderEmpty();
       }

package/es/translated/en-AU/components/OutcomeLabels/__tests__/index.test.js

@@ -52,6 +52,28 @@ describe('OutcomeLabels', function () {
     var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
     expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }, {
+        id: '2',
+        label: 'DEF',
+        title: 'Title2',
+        decorator: 'HIDE'
+      }, {
+        id: '3',
+        label: 'GHI',
+        title: 'Title3',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeLabels, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomeLabels, makeProps()));
   });