refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Link } from '@@/Link';
+
+import { DashboardItem } from './DashboardItem';
+
+const meta: Meta = {
+  title: 'Components/DashboardItem',
+  component: DashboardItem,
+};
+export default meta;
+
+interface StoryProps {
+  value: number;
+  icon: string;
+  type: string;
+}
+
+function Template({ value, icon, type }: StoryProps) {
+  return <DashboardItem value={value} icon={icon} type={type} />;
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  value: 1,
+  icon: 'fa fa-th-list',
+  type: 'Example resource',
+};
+
+export function WithLink() {
+  return (
+    <Link to="example.page">
+      <DashboardItem value={1} icon="fa fa-th-list" type="Example resource" />
+    </Link>
+  );
+}

app/react/components/DashboardItem/DashboardItem.test.tsx

@@ -0,0 +1,35 @@
+import { render } from '@/react-tools/test-utils';
+
+import { DashboardItem } from './DashboardItem';
+
+test('should show provided resource value', async () => {
+  const { getByLabelText } = renderComponent(1);
+  const value = getByLabelText('value');
+
+  expect(value).toBeVisible();
+  expect(value).toHaveTextContent('1');
+});
+
+test('should show provided icon', async () => {
+  const { getByLabelText } = renderComponent(0, 'fa fa-th-list');
+  const icon = getByLabelText('icon');
+  expect(icon).toHaveClass('fa-th-list');
+});
+
+test('should show provided resource type', async () => {
+  const { getByLabelText } = renderComponent(0, '', 'Test');
+  const title = getByLabelText('resourceType');
+
+  expect(title).toBeVisible();
+  expect(title).toHaveTextContent('Test');
+});
+
+test('should have accessibility label created from the provided resource type', async () => {
+  const { getByLabelText } = renderComponent(0, '', 'testLabel');
+
+  expect(getByLabelText('testLabel')).toBeTruthy();
+});
+
+function renderComponent(value = 0, icon = '', type = '') {
+  return render(<DashboardItem value={value} icon={icon} type={type} />);
+}

app/react/components/DashboardItem/DashboardItem.tsx

@@ -0,0 +1,27 @@
+import { Widget, WidgetBody } from '@@/Widget';
+
+interface Props {
+  value: number;
+  icon: string;
+  type: string;
+}
+
+export function DashboardItem({ value, icon, type }: Props) {
+  return (
+    <div className="col-sm-12 col-md-6" aria-label={type}>
+      <Widget>
+        <WidgetBody>
+          <div className="widget-icon blue pull-left">
+            <i className={icon} aria-hidden="true" aria-label="icon" />
+          </div>
+          <div className="title" aria-label="value">
+            {value}
+          </div>
+          <div className="comment" aria-label="resourceType">
+            {type}
+          </div>
+        </WidgetBody>
+      </Widget>
+    </div>
+  );
+}

app/react/components/DashboardItem/index.ts

@@ -0,0 +1 @@
+export { DashboardItem } from './DashboardItem';