Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tgreyuk/govuk-webcomponents

A set of encapsulated Web components consuming the GOV.UK Design System.
https://github.com/tgreyuk/govuk-webcomponents

Last synced: about 2 months ago
JSON representation

A set of encapsulated Web components consuming the GOV.UK Design System.

Host: GitHub
URL: https://github.com/tgreyuk/govuk-webcomponents
Owner: tgreyuk
License: mit
Created: 2020-06-13T21:37:08.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-02-08T22:04:39.000Z (over 3 years ago)
Last Synced: 2024-07-06T11:23:53.259Z (2 months ago)
Language: JavaScript
Homepage:
Size: 1.36 MB
Stars: 4
Watchers: 2
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-web-components - GOV.UK Web Components - Set of encapsulated web components consuming the GOV.UK Design System. (Real World / Design Systems)

README

        # govuk-webcomponents

A set of encapsulated [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) consuming the [GOV.UK Design System](https://design-system.service.gov.uk/components/).

[![npm](https://img.shields.io/npm/v/govuk-webcomponents.svg)](https://www.npmjs.com/package/govuk-webcomponents)

Please note this package is not affiliated to GOV.UK but consumes code as distributed in the [govuk-frontend](https://www.npmjs.com/package/govuk-frontend) npm package (v3.8.0).

## Installation

```bash

npm install --save govuk-webcomponents

```

## Components

Please visit the [Storybook](https://tgreyuk.github.io/govuk-webcomponents/storybook) site for demos and code examples.

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-accordion/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-back-link/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-breadcrumbs/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-button/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-character-count/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-checkboxes/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-date-input/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-details/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-error-summary/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-fieldset/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-file-upload/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-inset-text/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-panel/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-phase-banner/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-radios/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-select/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-skip-link/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-summary-list/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-table/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-tabs/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-tag/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-text-input/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-textarea/README.md)

- [\](https://github.com/tgreyuk/govuk-webcomponents/blob/master/components/govukwc-warning-text/README.md)

## Usage

The web components are distributed as ES modules and can be used with any platform.

### Modern browsers (Bare module specifiers)

To quickly try the components import the modules directly in the browser and serve with a process that supports bare module specifier resolution such as [es-dev-server](https://www.npmjs.com/package/es-dev-server).

```html

  

  

    import 'govuk-webcomponents/components/govukwc-button/govukwc-button';

  

```

### Browsers to IE11 (Compiling to ES5)

To support browsers (down to IE11) a combination of polyfills and build steps will need to be taken.

At a highlevel outline the following is required:

- Transpiling to ES5 will be required using build tools such as Webpack or Rollup.

- The [webcomponents.js](https://www.npmjs.com/package/@webcomponents/webcomponentsjs) pollyfills will need to be loaded.