SuperSelect::Multiple allow for a custom @resultCountMessage

Author: alex-ju

packages/components/src/components/hds/form/super-select/multiple/base.ts

@@ -55,7 +55,10 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
   }
 
   get resultCountMessage(): string {
-    return `${this.selectedCount} selected of ${this.optionsCount} total`;
+    return (
+      this.args.resultCountMessage ||
+      `${this.selectedCount} selected of ${this.optionsCount} total`
+    );
   }
 
   @action calculatePosition(

showcase/app/templates/components/form/super-select.hbs

@@ -859,6 +859,25 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H4>Custom result count message</Shw::Text::H4>
+
+  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item>
+      <Hds::Form::SuperSelect::Multiple::Base
+        @resultCountMessage="{{@model.PLACES_OPTIONS.length}} total"
+        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
+        @options={{@model.PLACES_OPTIONS}}
+        @selected={{@model.SELECTED_PLACES_OPTIONS}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @ariaLabel="Label"
+        as |option|
+      >
+        {{option}}
+      </Hds::Form::SuperSelect::Multiple::Base>
+    </SF.Item>
+  </Shw::Flex>
+
   <Shw::Divider />
 
   <Shw::Text::H2>Form::SuperSelect::Multiple::Field</Shw::Text::H2>

showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js

@@ -163,6 +163,25 @@ module(
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
     });
 
+    test('it should render the default after options block with custom result count message when `@resultCountMessage` exists', async function (assert) {
+      setOptionsData(this);
+      await render(
+        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @resultCountMessage="custom result count message" as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`
+      );
+      await click('.hds-form-super-select .ember-basic-dropdown-trigger');
+      assert
+        .dom(
+          '.hds-form-super-select__after-options .hds-form-super-select__result-count'
+        )
+        .hasText('custom result count message');
+      assert
+        .dom('.hds-form-super-select__after-options .hds-button')
+        .hasText('Show selected');
+      assert
+        .dom('.hds-form-super-select__after-options .hds-button')
+        .doesNotHaveTextContaining('Clear selected');
+    });
+
     // MATCH TRIGGER WIDTH
 
     test('`@matchTriggerWidth` should be true by default', async function (assert) {