feat: 🎸 Add MetadataList component (#193)

Add MetadataList component and use of it within session-recordings

✅ Closes: ICU-8232

ui/admin/tests/integration/components/metadata-list/index-test.js

@@ -0,0 +1,45 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | metadata-list/item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders horizontal (default) with icon, color and text', async function (assert) {
+    assert.expect(3);
+    await render(hbs`
+      <MetadataList as |list|>
+        <list.Item
+          @icon='arrow-up'
+          @color='success'
+        >
+          Sample text
+        </list.Item>
+      </MetadataList>
+    `);
+
+    assert.dom('[data-test-icon="arrow-up"]').isVisible();
+    assert.dom('li.metadata-list-item').hasClass('hds-foreground-success');
+    assert.dom('li.metadata-list-item').hasText('Sample text');
+  });
+
+  test('it renders vertical with icon, color and text', async function (assert) {
+    assert.expect(4);
+    await render(hbs`
+      <MetadataList @orientation='vertical' as |list|>
+        <list.Item
+          @icon='arrow-down'
+          @color='action'
+        >
+          Sample text 2
+        </list.Item>
+      </MetadataList>
+    `);
+
+    assert.dom('ul.metadata-list').hasClass('vertical');
+    assert.dom('[data-test-icon="arrow-down"]').isVisible();
+    assert.dom('li.metadata-list-item').hasClass('hds-foreground-action');
+    assert.dom('li.metadata-list-item').hasText('Sample text 2');
+  });
+});