Neighbourhoods Design System Components

The Neighbourhoods Design System Components package provides a set of extensible web components that are styled according to the Neighbourhoods Design System. This package offers components for different UI libraries, making it easy to incorporate the Neighbourhoods design system into your projects.

Installation

npm install neighbourhoods-design-system-components

Usage

The package provides the following base components:

• NHComponent: The base component that adds the Neighbourhoods Design System variables. Use this component to create your custom components with Neighbourhoods styling.

• NHComponentShoelace: Extends NHComponent and includes CSS variable overrides to use Shoelace UI components.

• NHComponentMaterial: Extends NHComponent and includes CSS variable overrides to use Material UI web components.

Look for a list of available CSS variables for Neighbourhoods Style Tokens here: https://github.com/nick-stebbings/neighbourhoods-design-system-components/blob/main/dist/styles/css/dark/variables.css

Here's an example of how to create a custom component using NHComponent:

import { css, CSSResult, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { NHComponent } from 'neighbourhoods-design-system-components/dist/components/base';

@customElement('nh-card')
export class NHCard extends NHComponent {
  @property()
  heading!: string;

  static styles: CSSResult[] = [
    super.styles as CSSResult,
    css`
      .container {
        background-color: var(--nh-theme-bg-subtle);

        /* your component styles go here... use CSS variables from the variables.css file */
      }
    `,
  ];

  render() {
    return html`
      <div class="container">
        <h1>${this.heading}</h1>
        <slot></slot>
      </div>
    `;
  }
}

Note: The NHCard component is provided as an example of creating a custom component. It is not exported directly from this package.

Customize the component as needed and enjoy the benefits of the Neighbourhoods Design System in your projects!