Use new UI (#8983)

* fixup build

* swap frontends

web-old/src/components/__tests__/Card.test.jsx

@@ -0,0 +1,46 @@
+import { h } from 'preact';
+import Card from '../Card';
+import { render, screen } from '@testing-library/preact';
+
+describe('Card', () => {
+  test('renders a Card with media', async () => {
+    render(<Card media={<img src="tacos.jpg" alt="tacos" />} />);
+    expect(screen.queryByAltText('tacos')).toBeInTheDocument();
+  });
+
+  test('renders a Card with a link around media', async () => {
+    render(<Card href="/tacos" media={<img src="tacos.jpg" alt="tacos" />} />);
+    expect(screen.queryByAltText('tacos')).toBeInTheDocument();
+    expect(screen.getByAltText('tacos').closest('a')).toHaveAttribute('href', '/tacos');
+  });
+
+  test('renders a Card with a header', async () => {
+    render(<Card header="Tacos!" />);
+    expect(screen.queryByText('Tacos!')).toBeInTheDocument();
+  });
+
+  test('renders a Card with a linked header', async () => {
+    render(<Card href="/tacos" header="Tacos!" />);
+    expect(screen.queryByText('Tacos!')).toBeInTheDocument();
+    expect(screen.queryByText('Tacos!').closest('a')).toHaveAttribute('href', '/tacos');
+  });
+
+  test('renders content', async () => {
+    const content = <div data-testid="content">hello</div>;
+    render(<Card content={content} />);
+    expect(screen.queryByTestId('content')).toBeInTheDocument();
+  });
+
+  test('renders buttons', async () => {
+    const buttons = [
+      { name: 'Tacos', href: '/tacos' },
+      { name: 'Burritos', href: '/burritos' },
+    ];
+    render(<Card buttons={buttons} />);
+    expect(screen.queryByText('Tacos')).toHaveAttribute('role', 'button');
+    expect(screen.queryByText('Tacos')).toHaveAttribute('href', '/tacos');
+
+    expect(screen.queryByText('Burritos')).toHaveAttribute('role', 'button');
+    expect(screen.queryByText('Burritos')).toHaveAttribute('href', '/burritos');
+  });
+});