feat(pie-breadcrumb): DSW-2830 added basic html

Author: thejfreitas

packages/components/pie-breadcrumb/src/index.ts

@@ -1,20 +1,31 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { classMap } from 'lit/directives/class-map.js';
 
 import styles from './breadcrumb.scss?inline';
-import { type BreadcrumbProps } from './defs';
+import { type BreadcrumbProps, componentSelector, componentClass } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
 
-const componentSelector = 'pie-breadcrumb';
-
 /**
  * @tagname pie-breadcrumb
  */
 export class PieBreadcrumb extends RtlMixin(LitElement) implements BreadcrumbProps {
     render () {
-        return html`<h1 data-test-id="pie-breadcrumb">Hello world!</h1>`;
+        const componentWrapperClasses = {
+            [componentClass]: true,
+        };
+
+        return html`
+            <nav 
+                data-test-id="${componentSelector}" 
+                class="${classMap(componentWrapperClasses)}">
+                <ol>
+                    <li><span>Previous Page</span></li>
+                    <li><span>Current Page</span></li>
+                </ol>
+            </nav>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite