feat: 🎸 OrderedSeriesDiagram component (#1573)

* feat: 🎸 OrderedSeriesDiagram component

Created `orderd-series-diagram` component to look a the state of the
ingress and egress filters and determine which diagram should be
displayed.

✅ Closes: ICU-6459

* refactor: 💡 sass lint fix

Fixed sass lint errors

✅ Closes: ICU-7347

* Update app.scss

added closing tag

* refactor: 💡 refactor of styling and test

Refactored styling for `ordered-series-diagram` to match mocks, and
fixed indent errors in test.

✅ Closes: ICU-7347

* refactor: 💡 clean up testing errors

Clean up testing errors for `ordered-series-diagram`

* refactor: 💡 refactor series diagram (#1577)

* refactor: 💡 merge refactor changes and fix test

Merged refactor changes to ordered series diagram and fix tests

✅ Closes: ICU-7347

Co-authored-by: Randall Morey <randall@randallmorey.com>

ui/admin/app/components/ordered-series-diagram/group/index.hbs

@@ -0,0 +1,25 @@
+<li class='ordered-series-diagram-group'>
+
+  <div
+    class='ordered-series-diagram-group-content
+      {{if @color (concat "hds-surface-" @color)}}'
+  >
+    <div
+      class='ordered-series-diagram-group-title
+        {{if @color (concat "hds-foreground-" @color "-on-surface")}}'
+    >
+      {{@title}}
+    </div>
+    <ol class='ordered-series-diagram-group-items'>
+      {{yield}}
+    </ol>
+  </div>
+
+  <div class='ordered-series-diagram-separator-icon'>
+    {{!
+      Separator icon is not configurable, but potentially could be.
+    }}
+    <FlightIcon @name='arrow-right' @size='24' />
+  </div>
+
+</li>

ui/admin/app/components/ordered-series-diagram/index.hbs

@@ -0,0 +1,8 @@
+<ol class='ordered-series-diagram'>
+  {{yield
+    (hash
+      Item=(component 'ordered-series-diagram/item')
+      Group=(component 'ordered-series-diagram/group')
+    )
+  }}
+</ol>

ui/admin/app/components/ordered-series-diagram/item/index.hbs

@@ -0,0 +1,17 @@
+<li class='ordered-series-diagram-item'>
+
+  <div class='ordered-series-diagram-item-content'>
+    <Hds::IconTile @icon={{@icon}} @size='large' @color='hcp' />
+    <span class='ordered-series-diagram-item-title'>
+      {{yield}}
+    </span>
+  </div>
+
+  <div class='ordered-series-diagram-separator-icon'>
+    {{!
+      Separator icon is not configurable, but potentially could be.
+    }}
+    <FlightIcon @name='arrow-right' @size='24' />
+  </div>
+
+</li>

ui/admin/app/styles/app.scss

@@ -598,6 +598,71 @@
   }
 }
 
+.ordered-series-diagram {
+  --group-title-line-height: 2.25rem;
+
+  display: flex;
+  margin-bottom: 1rem;
+
+  &-item {
+    display: flex;
+    margin-top: var(--group-title-line-height);
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+
+    &-title {
+      font-weight: var(--token-typography-font-weight-semibold);
+      margin-top: 0.5rem;
+      width: 4rem;
+    }
+
+    &:last-child {
+      > .ordered-series-diagram-separator-icon {
+        display: none;
+      }
+    }
+  }
+
+  &-group {
+    display: flex;
+
+    &-content {
+      border-radius: 0.5rem;
+      padding: 0 0.75rem 0.75rem;
+    }
+
+    &-items {
+      display: flex;
+
+      & .ordered-series-diagram-item {
+        margin-top: 0;
+      }
+    }
+
+    &-title {
+      font-size: var(--token-typography-display-100-font-size);
+      line-height: var(--group-title-line-height);
+      text-align: center;
+    }
+
+    &:last-child {
+      > .ordered-series-diagram-separator-icon {
+        display: none;
+      }
+    }
+  }
+
+  &-separator-icon {
+    color: var(--token-color-foreground-faint);
+    margin: 0.75rem 0.5rem;
+  }
+}
+
 .target-workers {
   margin-top: sizing.rems(xxl);
 

ui/admin/tests/integration/components/ordered-series-diagram/group/index-test.js

@@ -0,0 +1,44 @@
+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 | ordered-series-diagram/group/index',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders group icons with highlight background', async function (assert) {
+      assert.expect(7);
+
+      await render(hbs`
+        <OrderedSeriesDiagram::Group @title='Private Network' @color='highlight'>
+          <OrderedSeriesDiagram::Item @icon='user'>
+            Client
+          </OrderedSeriesDiagram::Item>
+          <OrderedSeriesDiagram::Item @icon='settings'>
+            Egress Worker
+          </OrderedSeriesDiagram::Item>
+        </OrderedSeriesDiagram::Group>
+      `);
+
+      assert
+        .dom('.ordered-series-diagram-group-content')
+        .hasClass('hds-surface-highlight');
+      assert
+        .dom('.ordered-series-diagram-group-title')
+        .hasText('Private Network');
+      assert.dom('[data-test-icon="user"]').isVisible();
+      assert.dom('[data-test-icon="arrow-right"]').isVisible();
+      assert
+        .dom('.ordered-series-diagram-item .ordered-series-diagram-item-title')
+        .hasText('Client');
+      assert.dom('[data-test-icon="settings"]').isVisible();
+      assert
+        .dom(
+          '.ordered-series-diagram-item:last-child .ordered-series-diagram-item-title'
+        )
+        .hasText('Egress Worker');
+    });
+  }
+);

ui/admin/tests/integration/components/ordered-series-diagram/index-test.js

@@ -0,0 +1,31 @@
+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 | ordered-series-diagram/index',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders two icon series', async function (assert) {
+      assert.expect(5);
+      await render(hbs`
+        <OrderedSeriesDiagram as |D|>
+          <D.Item @icon='user'>Client</D.Item>
+          <D.Item @icon='settings'>Egress Worker</D.Item>
+        </OrderedSeriesDiagram>
+      `);
+
+      assert.dom('[data-test-icon="user"]').isVisible();
+      assert.dom('.ordered-series-diagram-item-title').hasText('Client');
+      assert.dom('[data-test-icon="arrow-right"]').isVisible();
+      assert.dom('[data-test-icon="settings"]').isVisible();
+      assert
+        .dom(
+          '.ordered-series-diagram-item:last-child .ordered-series-diagram-item-title'
+        )
+        .hasText('Egress Worker');
+    });
+  }
+);

ui/admin/tests/integration/components/ordered-series-diagram/item/index-test.js

@@ -0,0 +1,24 @@
+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 | ordered-series-diagram/item/index',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders with icon and text', async function (assert) {
+      assert.expect(2);
+
+      await render(hbs`
+        <OrderedSeriesDiagram::Item @icon='user'>
+          Client
+        </OrderedSeriesDiagram::Item>
+      `);
+
+      assert.dom('[data-test-icon="user"]').isVisible();
+      assert.dom('.ordered-series-diagram-item-title').hasText('Client');
+    });
+  }
+);