Merge pull request #106 from ConduitIO/jj/new-links

feat(mox/link-button): add new link-button component

.changeset/early-bulldogs-rhyme.md

@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+feat(mox/link-button): add new link-button component

addon/components/mox/link-button.hbs

@@ -0,0 +1,16 @@
+{{#if @route}}
+  <Mox::LinkTo @route={{@route}} @model={{@model}}
+    class="mox-link-button cursor-pointer rounded-md p-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
+    data-test-mox-link={{@route}} ...attributes>
+    {{yield}}
+  </Mox::LinkTo>
+{{else}}
+  <a
+    href={{@externalUrl}}
+    target="_blank"
+    class="mox-link-button cursor-pointer rounded-md p-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
+    data-test-mox-link
+    rel="noopener noreferrer"
+    ...attributes
+  >{{yield}}</a>
+{{/if}}

addon/styles/mx-ui-components.css

@@ -165,3 +165,16 @@ a.arg-active.mox-tab-link:hover {
   font-weight: 700; /* font-bold */
   border-style: solid;
 }
+
+a.active.mox-link-button,
+a.active.mox-link-button:hover {
+  background-color: #d1d5db; /* gray-300 */
+  color: #1f2937; /* gray-800 */
+}
+
+.dark a.active.mox-link-button,
+.dark a.active.mox-link-button:hover,
+.dark a.mox-link-button:hover {
+  background-color: #374151; /* gray-700 */
+  color: #fff; /* white */
+}

addon/tailwind.config.js

@@ -30,4 +30,5 @@ module.exports = {
     },
   },
   plugins: [require('@tailwindcss/forms'), require('@meroxa/ui-base')],
+  darkMode: 'class',
 };

app/components/mox/link-button.js

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

stories/mox-link-button-light.stories.js

@@ -0,0 +1,47 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Mox Light/Mox::LinkButton',
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+    },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <Mox::LinkButton @route={{this.route}} @externalUrl={{this.url}} @model={{this.model}} class={{this.activeClass}}>
+      {{this.text}}
+    </Mox::LinkButton>`,
+  context: args,
+});
+
+export const LinkToInternalPage = Template.bind({});
+LinkToInternalPage.args = {
+  route: 'application',
+  model: 3,
+  url: null,
+  isButton: false,
+  text: 'Internal Link',
+};
+
+export const ActiveLink = Template.bind({});
+ActiveLink.args = {
+  route: 'application',
+  model: 3,
+  url: null,
+  isButton: false,
+  text: 'Active Link',
+  activeClass: 'active',
+};
+
+export const LinkToExternalPage= Template.bind({});
+LinkToExternalPage.args = {
+  route: null,
+  model: null,
+  url: 'https://github.com/ConduitIO/mx-ui-components',
+  isButton: false,
+  text: 'External Link',
+};
+

stories/mox-link-button.stories.js

@@ -0,0 +1,49 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Mox Dark/Mox::LinkButton',
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+    },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+  <div class="dark">
+    <Mox::LinkButton @route={{this.route}} @externalUrl={{this.url}} @model={{this.model}} class={{this.activeClass}}>
+      {{this.text}}
+    </Mox::LinkButton>
+  </div>`,
+  context: args,
+});
+
+export const LinkToInternalPage = Template.bind({});
+LinkToInternalPage.args = {
+  route: 'application',
+  model: 3,
+  url: null,
+  isButton: false,
+  text: 'Internal Link',
+};
+
+export const ActiveLink = Template.bind({});
+ActiveLink.args = {
+  route: 'application',
+  model: 3,
+  url: null,
+  isButton: false,
+  text: 'Active Link',
+  activeClass: 'active',
+};
+
+export const LinkToExternalPage= Template.bind({});
+LinkToExternalPage.args = {
+  route: null,
+  model: null,
+  url: 'https://github.com/ConduitIO/mx-ui-components',
+  isButton: false,
+  text: 'External Link',
+};
+

tests/integration/components/mox/link-button-test.js

@@ -0,0 +1,122 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Integration | Component | mox/link-button', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders an empty link by default', async function (assert) {
+    await render(hbs`
+      <Mox::LinkButton>
+        A link
+      </Mox::LinkButton>
+    `);
+
+    assert.dom('[data-test-mox-link]').includesText('A link');
+    assert.dom('[data-test-mox-link]').doesNotHaveAttribute('href');
+  });
+
+  test('it renders (@route)', async function (assert) {
+    await render(hbs`
+      <Mox::LinkButton @route="application">
+        Internal link
+      </Mox::LinkButton>
+    `);
+
+    assert.dom('[data-test-mox-link]').includesText('Internal link');
+    assert.dom('[data-test-mox-link]').hasAttribute('href', '/');
+  });
+
+  test('it renders (@externalUrl)', async function (assert) {
+    await render(hbs`
+      <Mox::LinkButton @externalUrl="http://localhost:7357">
+        External link
+      </Mox::LinkButton>
+    `);
+
+    assert.dom('[data-test-mox-link]').includesText('External link');
+    assert
+      .dom('[data-test-mox-link]')
+      .hasAttribute('href', 'http://localhost:7357');
+  });
+
+  test('it is accessible (@route + dark mode)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-900 dark">
+        <Mox::LinkButton @route="application">
+          Internal link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+
+  test('it is accessible (@externalUrl + dark mode)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-900 dark">
+        <Mox::LinkButton @externalUrl="http://localhost:7357">
+          External link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+
+  test('it is accessible (@route + dark mode + active)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-900 dark">
+        <Mox::LinkButton @route="application" class="active">
+          Internal link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+
+  test('it is accessible (@route + light mode)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-50">
+        <Mox::LinkButton @route="application">
+          Internal link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+
+  test('it is accessible (@route + light mode + active)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-50">
+        <Mox::LinkButton @route="application" class="active">
+          Internal link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+
+  test('it is accessible (@externalUrl + light mode)', async function (assert) {
+    await render(hbs`
+      <div class="bg-gray-50">
+        <Mox::LinkButton @externalUrl="http://localhost:7357">
+          External link
+        </Mox::LinkButton>
+      </div>
+    `);
+
+    await a11yAudit();
+    assert.ok(true, 'no a11y errors detected');
+  });
+});