Empty state component

addon/components/o-s-s/empty-state.hbs

@@ -0,0 +1,18 @@
+<div class="fx-1 fx-col fx-xalign-center fx-gap-px-18" ...attributes>
+  {{#if (has-block "image")}}
+    {{yield to="image"}}
+  {{else if @badgeIcon}}
+    <OSS::Badge @icon={{@badgeIcon}} @size="lg" />
+  {{/if}}
+  <span class="fx-col fx-xalign-center fx-gap-px-6">
+    <div class="font-color-gray-900 font-size-{{this.titleSize}} font-weight-semibold">
+      {{@title}}
+    </div>
+    <div class="font-color-gray-500 font-size-{{this.size}}">
+      {{@subtitle}}
+    </div>
+  </span>
+  {{#if (has-block "actions")}}
+    {{yield to="actions"}}
+  {{/if}}
+</div>

addon/components/o-s-s/empty-state.stories.js

@@ -0,0 +1,95 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/OSS::EmptyState',
+  component: 'empty state',
+  argTypes: {
+    badgeIcon: {
+      description: 'a font-awesome icon to be displayed in a badge',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    title: {
+      description: 'A title displayed below the icon or badge in the component',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    subtitle: {
+      description: 'A subtitle displayed under the title in the component',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    size: {
+      description: 'The size of the state',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'An component used when there is nothing to display on a page'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  badgeIcon: 'fa-thumbs-up',
+  title: 'Empty State Title',
+  subtitle: 'Additional information here',
+  size: 'md'
+};
+
+const Template = (args) => ({
+  template: hbs`<OSS::EmptyState @badgeIcon={{this.badgeIcon}} @title={{this.title}} @subtitle={{this.subtitle}} @size={{this.size}} />`,
+  context: args
+});
+
+const ImageTemplate = (args) => ({
+  template: hbs`<OSS::EmptyState @badgeIcon={{this.badgeIcon}} @title={{this.title}} @subtitle={{this.subtitle}} @size={{this.size}}>
+    <:image>
+      <OSS::Illustration @src="/@upfluence/oss-components/assets/images/no-records.svg" />
+    </:image>
+  </OSS::EmptyState>`,
+  context: args
+});
+
+const ActionTemplate = (args) => ({
+  template: hbs`<OSS::EmptyState @badgeIcon={{this.badgeIcon}} @title={{this.title}} @subtitle={{this.subtitle}} @size={{this.size}}>
+    <:actions>
+      <OSS::Button @label="Click me" />
+    </:actions>
+  </OSS::EmptyState>`,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
+
+export const UsageWithImage = ImageTemplate.bind({});
+UsageWithImage.args = defaultArgs;
+
+export const UsageWithActions = ActionTemplate.bind({});
+UsageWithActions.args = defaultArgs;

addon/components/o-s-s/empty-state.ts

@@ -0,0 +1,21 @@
+import type { htmlSafe } from '@ember/template';
+import Component from '@glimmer/component';
+
+interface OSSEmptyStateComponentSignature {
+  badgeIcon?: string;
+  title: ReturnType<typeof htmlSafe>;
+  subtitle: ReturnType<typeof htmlSafe>;
+  size?: 'sm' | 'md';
+}
+
+const ALLOWED_SIZE = ['sm', 'md'];
+
+export default class OSSEmptyStateComponent extends Component<OSSEmptyStateComponentSignature> {
+  get titleSize(): string {
+    return this.size === 'sm' ? 'md' : 'lg';
+  }
+
+  get size(): string {
+    return this.args.size && ALLOWED_SIZE.includes(this.args.size) ? this.args.size : 'md';
+  }
+}

app/components/o-s-s/empty-state.js

@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/empty-state';

tests/dummy/app/templates/index.hbs

@@ -276,4 +276,44 @@
     </div>
   </div>
 
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Empty state
+    </div>
+    <div class="fx-row fx-gap-px-36 fx-xalign-start">
+      <OSS::EmptyState @title="Title" @subtitle="Subtitle">
+        <:image>
+          <OSS::Illustration @src="/@upfluence/oss-components/assets/images/no-records.svg" />
+        </:image>
+        <:actions>
+          <OSS::Button @label="Button" />
+          <OSS::Button @skin="primary" @label="Button" />
+        </:actions>
+      </OSS::EmptyState>
+      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @badgeIcon="fa-thumbs-up">
+        <:actions>
+          <OSS::Button @label="Button" />
+          <OSS::Button @skin="primary" @label="Button" />
+        </:actions>
+      </OSS::EmptyState>
+      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @size="sm">
+        <:image>
+          <OSS::Illustration @src="/@upfluence/oss-components/assets/images/no-records.svg" />
+        </:image>
+        <:actions>
+          <OSS::Button @label="Button" />
+          <OSS::Button @skin="primary" @label="Button" />
+        </:actions>
+      </OSS::EmptyState>
+      <OSS::EmptyState @title="Title" @subtitle="Subtitle" @size="sm" @badgeIcon="fa-thumbs-up">
+        <:actions>
+          <OSS::Button @label="Button" />
+          <OSS::Button @skin="primary" @label="Button" />
+        </:actions>
+      </OSS::EmptyState>
+    </div>
+  </div>
+
 </div>

tests/integration/components/o-s-s/empty-state-test.ts

@@ -0,0 +1,77 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | o-s-s/empty-state', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with default properties', async function (assert) {
+    await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" />`);
+
+    assert.dom('div.font-color-gray-900').hasText('No Data');
+    assert.dom('div.font-color-gray-500').hasText('Try again later');
+  });
+
+  test('it renders with a badge icon', async function (assert) {
+    this.set('image', 'fa-thumbs-up');
+    await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" @badgeIcon={{this.image}} />`);
+
+    assert.dom('div.font-color-gray-900').hasText('No Data');
+    assert.dom('div.font-color-gray-500').hasText('Try again later');
+    assert.dom('.upf-badge').exists();
+  });
+
+  test('it supports named-block usage for image', async function (assert) {
+    await render(hbs`
+      <OSS::EmptyState @title="No Data" @subtitle="Try again later">
+        <:image>
+          <img src="/test-image.png" alt="Test Image" />
+        </:image>
+      </OSS::EmptyState>
+    `);
+
+    assert.dom('div.font-color-gray-900').hasText('No Data');
+    assert.dom('div.font-color-gray-500').hasText('Try again later');
+    assert.dom('img').exists();
+  });
+
+  test('it supports named-block usage for actions', async function (assert) {
+    await render(hbs`
+      <OSS::EmptyState @title="No Data" @subtitle="Try again later">
+        <:actions>
+          <button type="button">Retry</button>
+        </:actions>
+      </OSS::EmptyState>
+    `);
+
+    assert.dom('div.font-color-gray-900').hasText('No Data');
+    assert.dom('div.font-color-gray-500').hasText('Try again later');
+    assert.dom('button').hasText('Retry');
+  });
+
+  module('component size', function (hooks) {
+    test('it applies md sizes by default', async function (assert) {
+      await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" />`);
+      assert.dom('div.font-color-gray-900').hasClass('font-size-lg');
+      assert.dom('div.font-color-gray-500').hasClass('font-size-md');
+    });
+    test('it applies md sizes when given a wrong size', async function (assert) {
+      await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" @size="wrong" />`);
+      assert.dom('div.font-color-gray-900').hasClass('font-size-lg');
+      assert.dom('div.font-color-gray-500').hasClass('font-size-md');
+    });
+
+    test('it applies md sizes when specified', async function (assert) {
+      await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" @size="md" />`);
+      assert.dom('div.font-color-gray-900').hasClass('font-size-lg');
+      assert.dom('div.font-color-gray-500').hasClass('font-size-md');
+    });
+
+    test('it applies sm sizes when specified', async function (assert) {
+      await render(hbs`<OSS::EmptyState @title="No Data" @subtitle="Try again later" @size="sm" />`);
+      assert.dom('div.font-color-gray-900').hasClass('font-size-md');
+      assert.dom('div.font-color-gray-500').hasClass('font-size-sm');
+    });
+  });
+});