Freestyle entry for the new multi-select-dropdown component

ui/app/components/freestyle/sg-multi-select-dropdown.js

@@ -0,0 +1,14 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  options: computed(() => [
+    { key: 'option-1', label: 'Option One' },
+    { key: 'option-2', label: 'Option Two' },
+    { key: 'option-3', label: 'Option Three' },
+    { key: 'option-4', label: 'Option Four' },
+    { key: 'option-5', label: 'Option Five' },
+  ]),
+
+  selection: computed(() => ['option-2', 'option-4', 'option-5']),
+});

ui/app/templates/components/freestyle/sg-multi-select-dropdown.hbs

@@ -0,0 +1,9 @@
+{{#freestyle-usage "multi-select-dropdown" title="Multi-select dropdown"}}
+  {{multi-select-dropdown
+    label="Example Dropdown"
+    options=options
+    selection=selection}}
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  A wrapper around basic-dropdown for creating a list of checkboxes and tracking the state thereof.
+{{/freestyle-annotation}}

ui/app/templates/freestyle.hbs

@@ -67,6 +67,10 @@
         {{freestyle/sg-metrics}}
       {{/section.subsection}}
 
+      {{#section.subsection name="Multi-select dropdown"}}
+        {{freestyle/sg-multi-select-dropdown}}
+      {{/section.subsection}}
+
       {{#section.subsection name="Page tabs"}}
         {{freestyle/sg-page-tabs}}
       {{/section.subsection}}