feat(mox): add mox::card component

addon/components/mox/card.hbs

@@ -0,0 +1,38 @@
+<article
+  class="w-full bg-gray-800 rounded-lg border-solid border-2 border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-white"
+  data-test-mox-card
+  ...attributes
+>
+  <div class="flex items-center justify-between">
+
+    <Mox::Card::Main @route={{@route}} @model={{@model}} @onClick={{@onClick}}>
+
+      {{#if (has-block "icon")}}
+        <div class="bg-gray-900 rounded p-3" data-test-mox-card-icon>
+          {{yield to="icon"}}
+        </div>
+      {{/if}}
+
+      <div class="overflow-hidden">
+        <h3 class="text-xl font-semibold normal-case text-left truncate" data-test-mox-card-title>
+          {{yield to="title"}}
+        </h3>
+        <p class="text-gray-300 text-xs truncate text-left" data-test-mox-card-subtitle>
+          {{yield to="subtitle"}}
+        </p>
+      </div>
+
+    </Mox::Card::Main>
+
+    {{#if (has-block "menu")}}
+      <button
+        type="button"
+        class="flex items-center justify-center p-4 cursor-pointer h-max"
+        data-test-mox-card-menu
+      >
+        {{yield to="menu"}}
+      </button>
+    {{/if}}
+
+  </div>
+</article>

addon/components/mox/card/main.hbs

@@ -0,0 +1,23 @@
+{{#if @route}}
+  <Mox::Link
+    @route={{@route}}
+    @model={{@model}}
+    class="flex w-5/6 items-center justify-start p-4 gap-x-4 cursor-pointer"
+    data-test-mox-card-link
+  >
+
+    {{yield}}
+
+  </Mox::Link>
+{{else}}
+  <button
+    type="button"
+    class="flex w-5/6 items-center justify-start p-4 gap-x-4 cursor-pointer"
+    {{on "click" this.onClick}}
+    data-test-mox-card-button
+  >
+
+    {{yield}}
+
+  </button>
+{{/if}}

addon/components/mox/card/main.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { isPresent } from '@ember/utils';
+
+export default class MoxCardMainComponent extends Component {
+  @action
+  onClick() {
+    if (isPresent(this.args.onClick)) {
+      this.args.onClick();
+    }
+  }
+}

app/components/mox/card.js

@@ -0,0 +1 @@
+export { default } from 'mx-ui-components/components/mox/card';

app/components/mox/card/main.js

@@ -0,0 +1 @@
+export { default } from 'mx-ui-components/components/mox/card/main';

stories/header.css

@@ -1,6 +1,6 @@
 .wrapper {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
   padding: 15px 20px;
   display: flex;
   align-items: center;

stories/mox-card.stories.js

@@ -0,0 +1,133 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Mox/Mox::Card',
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    idd: { control: 'text' },
+    icon: { control: 'text' },
+    logo: { control: 'text' },
+    logoAlt: { control: 'text' },
+    buttonType: { control: 'text' },
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        {
+          name: 'White',
+          value: '#ffffff',
+        },
+        {
+          name: 'Mute',
+          value: '#FBFBFB',
+        },
+        {
+          name: 'Dark',
+          value: '#111827',
+        },
+        {
+          name: 'Sky',
+          value: '#06B6D4',
+        },
+      ],
+    },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+  <div class="flex flex-col space-y-4 box-border w-container">
+    <Mox::Card>
+      <:title>
+        {{this.title}}
+      </:title>
+      <:subtitle>
+        {{this.subtitle}}
+      </:subtitle>
+    </Mox::Card>
+  </div>`,
+  context: args,
+  parameters: {
+    background: 'Dark',
+  },
+});
+
+const IconTemplate = (args) => ({
+  template: hbs`
+    <div class="flex flex-col space-y-4 box-border w-container">
+      <Mox::Card>
+        <:icon>
+          <Mox::Icon @iconName={{this.icon}} class="text-white" />
+        </:icon>
+        <:title>
+          {{this.title}}
+        </:title>
+        <:subtitle>
+          {{this.subtitle}}
+        </:subtitle>
+        <:menu>
+          <Mox::Icon @iconName="action-menu-16" class="text-white" />
+        </:menu>
+      </Mox::Card>
+    </div>
+  `,
+  context: args,
+});
+
+const LogoTemplate = (args) => ({
+  template: hbs`
+    <div class="flex flex-col space-y-4 box-border w-container">
+      <Mox::Card>
+        <:icon>
+          <img src={{this.logo}} alt={{this.logoAlt}} class="h-6 w-6" />
+        </:icon>
+        <:title>
+          {{this.title}}
+        </:title>
+        <:subtitle>
+          {{this.subtitle}}
+        </:subtitle>
+        <:menu>
+          <Mox::Icon @iconName="action-menu-16" class="text-white" />
+        </:menu>
+      </Mox::Card>
+    </div>
+  `,
+  context: args,
+});
+
+export const WithIcon = IconTemplate.bind({});
+WithIcon.args = {
+  title: 'ecom-search-update',
+  subtitle: 'JavaScript · Turbine Application · Deployed to Common · Feb 23',
+  idd: 'ecom',
+  icon: 'connectors-16',
+  logo: null,
+  buttonType: null,
+  small: false,
+};
+
+export const WithLogo = LogoTemplate.bind({});
+WithLogo.args = {
+  title: 'ecom-search-update-but-with-a-veryveryveryveryveryvery-elaborate-text',
+  subtitle: 'JavaScript · Turbine Application · Deployed to Common · Feb 23',
+  idd: 'ecom',
+  icon: null,
+  logo: '/brand-logo-example.svg',
+  logoAlt: 'Meroxa',
+  buttonType: null,
+  small: false,
+};
+
+export const NoLogoNoMenu = Template.bind({});
+NoLogoNoMenu.args = {
+  title: 'ecom-search-update',
+  subtitle: 'JavaScript · Turbine Application · Deployed to Common · Feb 23',
+  idd: 'ecom',
+  icon: null,
+  logo: null,
+  buttonType: null,
+  small: false,
+};

tests/integration/components/mox/card-test.js

@@ -0,0 +1,139 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Integration | Component | mox/card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the title', async function (assert) {
+    await render(hbs`
+      <Mox::Card>
+        <:title>
+          Grandia
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1997
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    assert.dom('[data-test-mox-card]').includesText('Grandia');
+    assert.dom('[data-test-mox-card]').includesText('PS1 · RPG · 1997');
+    assert.dom('[data-test-mox-card-title]').includesText('Grandia');
+    assert
+      .dom('[data-test-mox-card-subtitle]')
+      .includesText('PS1 · RPG · 1997');
+  });
+
+  test('it renders the link element if a route is passed', async function (assert) {
+    await render(hbs`
+      <Mox::Card @route="application">
+        <:title>
+          Shadowhearts II
+        </:title>
+        <:subtitle>
+          PS2 · RPG · 2002
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    assert.dom('[data-test-mox-card] a').exists();
+    assert.dom('[data-test-mox-card-link]').exists();
+    assert.dom('[data-test-mox-card-button]').doesNotExist();
+    assert.dom('[data-test-mox-card-link]').includesText('Shadowhearts');
+    assert.dom('[data-test-mox-card-link]').includesText('PS2 · RPG · 2002');
+  });
+
+  test('it renders an icon placeholder', async function (assert) {
+    await render(hbs`
+      <Mox::Card @route="application">
+        <:icon>
+          an icon
+        </:icon>
+        <:title>
+          FFVII
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1994
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    assert.dom('[data-test-mox-card]').includesText('an icon');
+    assert.dom('[data-test-mox-card-icon]').includesText('an icon');
+  });
+
+  test('it renders a menu placeholder', async function (assert) {
+    await render(hbs`
+      <Mox::Card @route="application">
+        <:title>
+          FFVII
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1994
+        </:subtitle>
+        <:menu>
+          a menuuuu
+        </:menu>
+      </Mox::Card>
+    `);
+
+    assert.dom('[data-test-mox-card]').includesText('a menuuu');
+    assert.dom('[data-test-mox-card-menu]').includesText('a menuuu');
+  });
+
+  test('it triggers the @onClick action when the button is clicked', async function (assert) {
+    assert.expect(1);
+
+    this.set('dummyAction', () => {
+      assert.ok(true, 'it triggers the onClick action');
+    });
+
+    await render(hbs`
+      <Mox::Card @onClick={{this.dummyAction}}>
+        <:title>
+          FFVII
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1994
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    await click('[data-test-mox-card-button]');
+  });
+
+  test('it has no accessibility issues (button mode)', async function (assert) {
+    await render(hbs`
+      <Mox::Card @onClick={{this.dummyAction}}>
+        <:title>
+          FFVII
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1994
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y detected');
+  });
+
+  test('it has no accessibility issues (link mode)', async function (assert) {
+    await render(hbs`
+      <Mox::Card @route="application">
+        <:title>
+          FFVII
+        </:title>
+        <:subtitle>
+          PS1 · RPG · 1994
+        </:subtitle>
+      </Mox::Card>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y detected');
+  });
+});