Refactor fork-me-block to use LitElement via ThemedElement

src/components/fork-me-block.test.ts

@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { screen, within } from '@testing-library/dom';
+import { html } from 'lit';
+import { fixture } from '../../__tests__/helpers/fixtures';
+import './fork-me-block';
+
+describe('fork-me-block', () => {
+  beforeEach(() => {
+    // Clear any existing custom elements if needed
+  });
+
+  it('defines a component', () => {
+    expect(customElements.get('fork-me-block')).toBeDefined();
+  });
+
+  it('renders the fork me content', async () => {
+    const { shadowRootForWithin } = await fixture(
+      html`<fork-me-block data-testid="fork-block"></fork-me-block>`,
+    );
+    const { getByText } = within(shadowRootForWithin);
+
+    expect(screen.getByTestId('fork-block')).toBeInTheDocument();
+    expect(getByText('Fork me on GitHub')).toBeInTheDocument();
+    expect(getByText('Fork this project')).toBeInTheDocument();
+    expect(getByText(/Hoverboard is open source conference website template/)).toBeInTheDocument();
+  });
+
+  it('renders the GitHub link correctly', async () => {
+    const { shadowRootForWithin } = await fixture(html`<fork-me-block></fork-me-block>`);
+    const { getByRole } = within(shadowRootForWithin);
+
+    const link = getByRole('link');
+    expect(link).toHaveAttribute('href', 'https://github.com/gdg-x/hoverboard');
+  });
+
+  it('has proper styling classes', async () => {
+    const { shadowRootForWithin } = await fixture(html`<fork-me-block></fork-me-block>`);
+    const { getByText } = within(shadowRootForWithin);
+
+    const container = getByText('Fork me on GitHub').closest('.container');
+    expect(container).toHaveClass('container', 'container-narrow');
+
+    const button = getByText('Fork this project').closest('md-outlined-button');
+    expect(button).toHaveClass('icon-right');
+  });
+});

src/elements/fork-me-block.ts → src/components/fork-me-block.ts

@@ -1,15 +1,18 @@
-import { customElement } from '@polymer/decorators';
-import '@polymer/iron-icon';
+// TODO: enable imports
+// import '@polymer/iron-icon';
 import '@material/web/button/outlined-button.js';
-import { html, PolymerElement } from '@polymer/polymer';
-import '../utils/icons';
-import './shared-styles';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+// TODO: enable imports
+// import '../utils/icons';
+import { ThemedElement } from './themed-element';
 
 @customElement('fork-me-block')
-export class ForkMeBlock extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="shared-styles flex flex-alignment">
+export class ForkMeBlock extends ThemedElement {
+  static override get styles() {
+    return [
+      ...super.styles,
+      css`
         :host {
           display: flex;
           width: 100%;
@@ -22,8 +25,12 @@ export class ForkMeBlock extends PolymerElement {
           --md-outlined-button-label-text-color: #000;
           --md-outlined-button-outline-color: #000;
         }
-      </style>
+      `,
+    ];
+  }
 
+  override render() {
+    return html`
       <div class="container container-narrow">
         <h1 class="container-title">Fork me on GitHub</h1>
         <p>
@@ -43,3 +50,9 @@ export class ForkMeBlock extends PolymerElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fork-me-block': ForkMeBlock;
+  }
+}

src/pages/home-page.ts

@@ -10,7 +10,7 @@ import { HeroBlock } from '../components/hero/hero-block';
 import '../elements/about-organizer-block';
 import '../elements/featured-videos';
 import '../elements/footer-block';
-import '../elements/fork-me-block';
+import '../components/fork-me-block';
 import '../elements/gallery-block';
 import '../elements/latest-posts-block';
 import '../elements/map-block';
@@ -308,7 +308,7 @@ export class HomePage extends ReduxMixin(PolymerElement) {
       ? showForkMeBlockForProjectIds.includes(firebaseApp.options.appId)
       : false;
     if (showForkMeBlock) {
-      import('../elements/fork-me-block');
+      import('../components/fork-me-block');
     }
     return showForkMeBlock;
   }