open-index/open-npm huggingface dataset:
npm package: @servicebell/widget
Description: Embed the ServiceBell widget on your website.
Latest version: 0.1.6

# ServiceBell Widget

Embed the ServiceBell widget on your website.

## Quick Start

```js
import ServiceBell from '@servicebell/widget';

ServiceBell.init('CLIENT_KEY_HERE');
```

## Documentation

Find the full documentation over at https://docs.servicebell.com/
npm package: @servicebus/retry
Description: retry middleware for servicebus using kafka
Author: mattwalters5@gmail.com
Latest version: 1.0.3

# @servicebus/retry
[![Build Status](https://travis-ci.org/servicebus/retry.svg?branch=master)](https://travis-ci.org/servicebus/retry)
[![codecov](https://codecov.io/gh/servicebus/retry/branch/master/graph/badge.svg)](https://codecov.io/gh/servicebus/retry)

Adds message acknowledge, reject, and retry capability to servicebus messages. A MemoryStore is available for testing and scenarios where processes to not exit/restart when a message is rejected. A RedisStore is available for multiprocess and crash-oriented design, where processes purposefully crash after a message reject and restart. 

### Configuration:

#### MemoryStore

```
const config = require('cconfig')();
const servicebus = require('servicebus');
const retry = require('@servicebus/retry');

const bus = servicebus.bus({
  url: config.RABBITMQ_URL
});

bus.use(retry({
  store: new retry.MemoryStore()
}));

module.exports = bus;
```

#### RedisStore

```
const config = require('cconfig')();
const servicebus = require('servicebus');
const retry = require('@servicebus/retry');

const bus = servicebus.bus({
  url: config.RABBITMQ_URL
});

bus.use(retry({
  store: new retry.RedisStore({
    host: config.REDIS.HOST,
    port: config.REDIS.PORT
  })
}));

module.exports = bus;
```

#### message.handle

@servicebus/retry causes incoming messages to have a .handle property with three available functions: `acknowledge(fn)`, `ack(fn)` (shorthand for acknowledge), and `reject(fn)`. The callback parameter in all methods is optional. 

### usage

```
bus.listen('queue.name', { ack: true /* making this queue and messages persistent */ }, function (msg) {
  msg.handle.ack(function () {
    console.log('acked message ' + msg.cid);
  });
});

bus.subscribe('routing.key2', { ack: true /* making this queue and messages persistent */ }, function (msg) {
  msg.handle.reject(function () {
    throw new Error('message ' + msg.cid + ' was rejected. let's crash and retry');
  });
});
```
npm package: @servicelabsco/nestjs-utility-cli
Description: ## Install
Author: Bibek Manandhar
Latest version: 1.0.6

# @servicelabsco/nestjs-utility-cli

## Install

### Local

```bash
sudo npm install -g .
```

Using [yarn](https://yarnpkg.com)

```bash
yarn global add @servicelabsco/nestjs-utility-cli
```

Using npm:

```bash
npm install -g @servicelabsco/nestjs-utility-cli
```

## Usage

Call the tool and get a help on the options:

```bash
✗ slnu --help

Usage: slnu [options] [command]

CLI Tool for generating nestjs files

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  generator       Run generator script
  listing         Run listing script
  migrator        Run migrator script
  seeder          Run seeder script
  help [command]  display help for command
```

Example:

```bash
✗ slnu generator
```
npm package: @servicelabsco/slabs-dev-cli
Description: ## Installation
Author: Saurav Nepal
Latest version: 1.0.12

# Welcome to the official repo of sl-cli

## Installation

- sudo npm i -g @servicelabsco/slabs-dev-cli

## Add ENV file in the working dir

- After you install the cli, you are required to add some configuration in the .env file. Please add **Key:** `cli_password` and **Value:** `123456`. this is the basic authentication for accessing the cli

**sl-cli**

This Command Line Interface (CLI) tool, referred to as "sl-cli," is provided as an open-source project under the MIT License. By using or contributing to this project, you acknowledge and agree to the terms and conditions of the license.

### Help

- **Command:** `sl help`
- **Description:** This command is responsible for listing down all the command that is supported in this cli.

### Generator (Add the Feature)

- **Command:** `sl generator`
- **Description:** This command is responsible for generating the listing and controllers along with the migration file. It can be used to create features within the module. this allows you to create the direct controllers, migration, job, subscriber and listing

### Seeder (Add Data to the table)

- **Command:** `sl seeder`
- **Description:** This command is responsible to create the seeder for adding any data to the table

### Sync Classes (Sync The file)

- **Command:** `sl syncClasses`
- **Description:** This command is responsible to sync all the jobs file, create entity hash that can be use as a source definition. Moreover this will also add the necessary files in the es6Classes

### migrator

- **Command:** `sl migrator`
- **Description:** This command is responsible to create the migration file which will allow you to create the migration in the postgres table.

### Warnings

1. **Use at Your Own Risk:** This CLI tool is provided "as-is," and the author makes no guarantees or warranties regarding its functionality, accuracy, or suitability for any purpose. Usage of this tool is at your own risk.

2. **Backup Critical Data:** Before using any commands that modify data or settings, it is strongly recommended to create backups of critical data to prevent unintentional loss or corruption.

### Contribution

Contributions to this project are welcome. However, please adhere to the guidelines outlined in the [CONTRIBUTING.md](CONTRIBUTING.md) file.

### License

This project is licensed under the [MIT License](LICENSE).

For more information, visit the [GitHub repository](https://github.com/servicelabsco/sl-dev-cli).

Thank you for using sl-cli!
npm package: @servicenow/atf-fluent
Description: [Using the ServiceNow SDK](https://www.servicenow.com/docs/bundle/xanadu-application-development/page/build/servicenow-sdk/concept/servicenow-sdk-landing.html)
Latest version: 2.0.5

# ServiceNow SDK ATF Plugin

[Using the ServiceNow SDK](https://www.servicenow.com/docs/bundle/xanadu-application-development/page/build/servicenow-sdk/concept/servicenow-sdk-landing.html)
npm package: @servicenow/ui-types
Description: Collection of UI Framework on Next Experience data types to provide UIB the ability to auto-wire components and to share common type schemas.
Latest version: 24.1.1

# @servicenow/ui-types

Collection of Now Experience UI Framework data types to provide UIB the ability to auto-wire components and to share common type schemas.

If you are unfamiliar with Now Experience UI Framework's type schema or JSON Schema, please visit its [documentation](https://developer.servicenow.com/dev.do#!/guide/paris/now-experience/ui-framework/now-experience-ui-framework-101/type-schema).

To contribute to this repo, see [CONTRIBUTING.md](CONTRIBUTING.md).

- [Usage](#usage)
  - [Primitives](#primitives)
  - [Sets](#sets)
- [API](#api)
  - [Primitives](#primitives-api)
  - [Sets](#sets-api)

## Usage

`@servicenow/ui-types` has two categories of exports: primitives and sets.

### Primitives

Primitives are the building blocks for your Now Experience UI Framework schemas. They are a set of commonly used types for properties and action payloads for you to use. All primitives are JSON Schema objects.

To use primitives, you can import them from `@servicenow/ui-types`:

```js
import {sysId} from '@servicenow/ui-types';
import {createCustomElement} from '@servicenow/ui-core';

createCustomElement('my-component', {
  properties: {
    sysId: {
      schema: sysId
    }
  }
});
```
`sysId` is one of the primitives and has the JSON Schema rules to make sure users pass in a valid sysId to your component.

If you need to augment the type, you can combine the primitive with your own schema. Please see JSON Schema's documentation on [how to combine schemas](https://json-schema.org/understanding-json-schema/reference/combining.html). For example, let's say your property is a `table` primitive type but you want to refine it to only be one of a handful of tables. You can use `allOf` to acheive that:

```js
import {table} from '@servicenow/ui-types';

createCustomElement('my-component', {
  properties: {
    table: {
      schema: {
        allOf: [
          table,
          {enum: ['table_one', 'table_two', 'table_three']}
        ]
      }
    }
  }
});
```

### Sets

Sets are a grouping of primitives that are commonly used together. Using sets in your component definitions will help UIB auto-wire your component when it is dropped onto a page: if there is a data broker on the page that already uses the same set as your component, UIB can ask the user if they want to automatically wire that data broker to your properties!

```js
import {record} from '@servicenow/ui-types';
import {createCustomElement} from '@servicenow/ui-core';

createCustomElement('my-component', {
  properties: {
    table: {
      schema: record.table
    }
    sysId: {
      schema: record.sysId
    }
  }
});
```

## API

### Primitives API

- `table`: string
- `sysId`: string
- `query`: string

### Sets API

- `record`
  - `sysId`: required
  - `table`: required
  - `view`: optional
- `list`
  - `table`: required
  - `query`: required
  - `page`: optional
  - `recordsPerPage`: optional
npm package: @servicensw/accordion
Description: accordion component
Author: PreviousNext
Latest version: 4.0.7

# @servicensw/accordion

![accordion  component](https://previousnext.github.io/snsw-styleguide/screenshots/accordion.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-accordion.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/accordion --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/accordion';`
- Sass/Eyeglass: `@import 'servicensw-accordion';`
- Native CSS: `@import url('dist/accordion.css');`
- Link tag: `<link href="dist/accordion.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import Accordion from "@servicensw/accordion"

new Accordion(".accordion:not(.is-excluded)")
```

Legacy usage;

- IIFE: `<script src="dist/accordion.js" type="text/javascript"></script>` (initialized for all `.accordion` elements)
- Common JS: `const Accordion = require("@servicensw/accordion")` (initialize yourself)

**HTML**

```html
<div class="accordion__group">
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
</div>
```

or for a group of accordions...

```html
<div class="accordion__group">
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/advertising
Description: advertising component
Author: PreviousNext
Latest version: 2.2.7

# @servicensw/advertising

![Advertising component](https://previousnext.github.io/snsw-styleguide/screenshots/ad-component.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-advertising.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/advertising --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/advertising';`
- Sass/Eyeglass: `@import 'servicensw-advertising';`
- Native CSS: `@import url('dist/advertising.css');`
- Link tag: `<link href="dist/advertising.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="advertising">
  <div class="advertising__ad">
    /* Place ad code here */
    <a href="https://www.service.nsw.gov.au/advertising-guidelines"
      >Advertising</a
    >
  </div>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/base
Description: Base styles and variables
Author: PreviousNext
Latest version: 3.1.3

# @servicensw/base

Base CSS for all of Service NSW.

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-base.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/base --save-dev
```

### How to use

**CSS**

Importantly, the dist CSS from this package includes all of the CSS variables for all other components.

- PostCSS workflow: `@import '@servicensw/base';`
- Sass/Eyeglass: `@import 'servicensw-base';`
- Native CSS: `@import url('dist/base.css');`
- Link tag: `<link href="dist/base.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import Base from "@servicensw/base"

new Base({
  idAttributeSelectors:
    ":not(.notice) > h2:not(.accordion__title), h3:not(.accordion__title)",
  responsiveTableSelectors:
    ".table--responsive:not(.is-excluded), .page-section table:not(.is-excluded):not(.table--responsive)",
  videoTranscriptSelectors: ".transcript:not(.is-excluded)",
  makeGlobal: true,
})
```

The utilities can also be used independently;

```js
import { Keyboard } from "@servicensw/base"
```

Legacy usage;

- IIFE: `<script src="dist/base.js" type="text/javascript"></script>`
- Common JS: `const Base = require("@servicensw/base")` (initialize yourself)

This package includes a variety of JS functionality. This functionality can be access by including `dist/base.js`
via a script tag, or it can be imported using ES module syntax. See `src/base.js` for examples.

[Change log](./CHANGELOG.md)
npm package: @servicensw/box
Description: Box
Author: PreviousNext
Latest version: 2.2.7

# @servicensw/box

![Box component](https://previousnext.github.io/snsw-styleguide/screenshots/box.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-box.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/box --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/box';`
- Sass/Eyeglass: `@import 'servicensw-box';`
- Native CSS: `@import url('dist/box.css');`
- Link tag: `<link href="dist/box.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="box">
  <h3>Box heading</h3>
  <p>Box content</p>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/browserslist-config
Description: Shareable Browserslist config
Author: PreviousNext
Latest version: 1.0.7

# @servicensw/browserslist-config

Shareable Browserslist config.

### Installation

```
npm install @servicensw/browserslist-config --save-dev
```

### How to use

Add this to your package.json file:

```
"browserslist": [
	"extends @servicensw/browserslist-config"
]
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/builder
Description: Build files to allow other packages to compile outside of the monorepository
Author: PreviousNext
Latest version: 1.2.4

# @servicensw/builder

PostCSS and Rollup config to build all `@servicensw` GEL packages.

### Installation

```
npm install @servicensw/builder --save-dev
```

### How to use

This package allows other GEL packages to build by themselves so they can have a
`dist` folder included with the NPM package version.

Add the following lines to the `@servicensw` packages `package.json` file,
substituting:
- `cssfile` with the packages CSS filename.
- `es6file` with the packages ES6 filename.
- `jsfile` with the output JS file name (typically the ES6 filename, without `.es6`).

```json
"scripts": {
  "build:css": "NODE_ENV=production ./node_modules/.bin/postcss src/cssfile --dir dist --config ./node_modules/@servicensw/builder/postcss.config.js",
  "build:js": "NODE_ENV=production ./node_modules/.bin/rollup src/es6file --o dist/jsfile --f iife --config ./node_modules/@servicensw/builder/rollup.config.js",
  "build": "npm run build:css && npm run build:js"
}
```

If you have multiple CSS files, add additional `src/<css file>` files seperated
by a space.

If you have multiple JS files, you'll need to duplicate the entire command and
seperate it with `&&` as rollup can only handle one file at a time.
npm package: @servicensw/buttons
Description: Button styles
Author: PreviousNext
Latest version: 2.5.3

# @servicensw/buttons

![Button components](https://previousnext.github.io/snsw-styleguide/screenshots/buttons.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-styleguide.html#kssref-styleguide-button)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/buttons --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/buttons';`
- Sass/Eyeglass: `@import 'servicensw-buttons';`
- Native CSS: `@import url('dist/buttons.css');`
- Link tag: `<link href="dist/buttons.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<a class="button button--primary" href="#">Button</a>
```

```html
<a class="button button--secondary" href="#">Button</a>
```

```html
<a class="button button--tertiary" href="#">Button</a>
```

```html
<span class="badge">Badge</span>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/constants
Description: PostCSS constants component
Author: PreviousNext
Latest version: 4.1.2

# @servicensw/constants

CSS custom properties and breakpoints for all @servicensw packages.

### Installation

```
npm install @servicensw/constants --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/constants';`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/cta
Description: cta component
Author: PreviousNext
Latest version: 2.1.3

# @servicensw/cta

![cta  component](https://previousnext.github.io/snsw-styleguide/screenshots/cta.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-cta.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/cta --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/cta';`
- Sass/Eyeglass: `@import 'servicensw-cta';`
- Native CSS: `@import url('dist/cta.css');`
- Link tag: `<link href="dist/cta.css" rel="stylesheet" type="text/css">`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/drop-menu
Description: Drop menu component
Author: PreviousNext
Latest version: 2.5.9

# @servicensw/drop-menu

![Drop menu component](https://previousnext.github.io/snsw-styleguide/screenshots/drop-menu.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-drop-menu.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/drop-menu --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/drop-menu';`
- Sass/Eyeglass: `@import 'servicensw-drop-menu';`
- Native CSS: `@import url('dist/drop-menu.css');`
- Link tag: `<link href="dist/drop-menu.css" rel="stylesheet" type="text/css">`

**JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import DropMenu from "@servicensw/drop-menu"

const dropMenus = document.querySelectorAll(".drop-button:not(.is-excluded)")
dropMenus.forEach((element, index) => {
  new DropMenu(element, index)
})
```

Legacy usage;

- IIFE: `<script src="dist/drop-menu.js" type="text/javascript"></script>` (initialized for all `.drop-button:not(.is-excluded)` elements)
- Common JS: `const DropMenu = require("@servicensw/drop-menu")` (initialize yourself)

**HTML**

```html
<div class="drop-button__wrapper">
  <p id="dropMenuDescription">Select an option from the list</p>
  <div class="drop-button">
    <ul aria-label="Drop menu" aria-describedby="dropMenuDescription">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
    </ul>
  </div>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/embedded-cta
Description: embedded-cta component
Author: PreviousNext
Latest version: 1.2.3

# @servicensw/embedded-cta

![embedded-cta  component](https://previousnext.github.io/snsw-styleguide/screenshots/embedded-cta.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-embedded-cta.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/embedded-cta --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/embedded-cta';`
- Sass/Eyeglass: `@import 'servicensw-embedded-cta';`
- Native CSS: `@import url('dist/embedded-cta.css');`
- Link tag: `<link href="dist/embedded-cta.css" rel="stylesheet" type="text/css">`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/feedback
Description: feedback component
Author: PreviousNext
Latest version: 2.0.7

# @servicensw/feedback

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-feedback.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/feedback --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/feedback';`
- Sass/Eyeglass: `@import 'servicensw-feedback';`
- Native CSS: `@import url('dist/feedback.css');`
- Link tag: `<link href="dist/feedback.css" rel="stylesheet" type="text/css">`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/fixed-cta
Description: fixed-cta component
Author: PreviousNext
Latest version: 3.2.3

# @servicensw/fixed-cta

![Fixed CTA component](https://previousnext.github.io/snsw-styleguide/screenshots/fixed-cta.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-fixed-cta.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/fixed-cta --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/fixed-cta';`
- Sass/Eyeglass: `@import 'servicensw-fixed-cta';`
- Native CSS: `@import url('dist/fixed-cta.css');`
- Link tag: `<link href="dist/fixed-cta.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="fixed-cta">
  <div class="container">
    <div class="fixed-cta__action">
      <a
        href="#"
        class="button button--primary"
        aria-describedby="fixedCtaMessage"
        >Call to action</a
      >
    </div>
    <div class="fixed-cta__message" id="fixedCtaMessage">
      <p>A message to accompany the call to action.</p>
    </div>
  </div>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/form
Description: Form element styles
Author: PreviousNext
Latest version: 3.1.3

# @servicensw/form

Form element styles.

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-styleguide.html#kssref-styleguide-forms)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/form --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/form';`
- Sass/Eyeglass: `@import 'servicensw-form';`
- Native CSS: `@import url('dist/form.css');`
- Link tag: `<link href="dist/form.css" rel="stylesheet" type="text/css">`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/global
Description: Global header/footer components.
Author: PreviousNext
Latest version: 5.0.7

# @servicensw/global

Global nav for Service NSW.

### Installation

```
npm install @servicensw/global --save-dev
```

### How to use

This package is a dependancy of other projects and documentation on how to use it
is currently unavailable.
[Change log](./CHANGELOG.md)
npm package: @servicensw/grid
Description: Grid system
Author: PreviousNext
Latest version: 3.0.7

# @servicensw/grid

![Grid component](https://previousnext.github.io/snsw-styleguide/screenshots/grid.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-grid.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/grid --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/grid';`
- Sass/Eyeglass: `@import 'servicensw-grid';`
- Native CSS: `@import url('dist/grid.css');`
- Link tag: `<link href="dist/grid.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="container">
  <div class="grid">
    <div class="grid__col grid--6-col"></div>
    <div class="grid__col grid--6-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--4-col"></div>
    <div class="grid__col grid--8-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--9-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--4-col"></div>
    <div class="grid__col grid--4-col"></div>
    <div class="grid__col grid--4-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--3-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--6-col"></div>
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--3-col"></div>
  </div>
  <div class="grid">
    <div class="grid__col grid--3-col"></div>
    <div class="grid__col grid--6-col"></div>
    <div class="grid__col grid--3-col"></div>
  </div>
</div>
```

### Developer notes

`.container` element provides correct `max-width` to match Service NSW branding.
[Change log](./CHANGELOG.md)
npm package: @servicensw/header
Description: Header components
Author: PreviousNext
Latest version: 4.0.7

# @servicensw/header

![header component](https://previousnext.github.io/snsw-styleguide/screenshots/header.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-header.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/header --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/header';`
- Sass/Eyeglass: `@import 'servicensw-header';`
- Native CSS: `@import url('dist/header.css');`
- Link tag: `<link href="dist/header.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<header class="page-header">
  <div class="container">
    <div class="print-logo">
      <img src="../images/servicensw-logo.png" alt="Service NSW" />
    </div>
    <nav class="breadcrumb" role="navigation" aria-label="Breadcrumbs">
      <ol>
        <li>
          <a href="#">Home</a>
        </li>
        <li class="breadcrumb__previous">
          <a href="#">Previous page</a>
        </li>
        <li>
          <a href="#">Current page</a>
        </li>
      </ol>
    </nav>
    <h1>Page title</h1>
    <p>Page intro.</p>
  </div>
</header>
```

### Developer notes

Please ensure the correct path to servicensw-logo.png print logo is provided for printed output of page.
[Change log](./CHANGELOG.md)
npm package: @servicensw/icon
Description: Icons
Author: PreviousNext
Latest version: 2.1.7

# @servicensw/icon

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-icon.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/icon --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/icon';`
- Sass/Eyeglass: `@import 'servicensw-icon';`
- Native CSS: `@import url('dist/icon.css');`
- Link tag: `<link href="dist/icon.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<span class="icon icon--44 icon--car"></span>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/loader
Description: Loader
Author: PreviousNext
Latest version: 3.0.13

# @servicensw/loader

A loader/spinner component.

![Loader component](https://previousnext.github.io/snsw-styleguide/screenshots/loader.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-loader.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/loader --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/loader';`
- Sass/Eyeglass: `@import 'servicensw-loader';`
- Native CSS: `@import url('dist/loader.css');`
- Link tag: `<link href="dist/loader.css" rel="stylesheet" type="text/css">`

**React**

```js
import Loader from "@servicensw/loader"

const App = () => <Loader message="Optional message" />
```

### Developer notes

The loader graphic uses an SMIL SVG for animation. This package supports animation in IE/Edge for projects
using [Modernizr](https://modernizr.com/download#smil-setclasses) by providing a fallback GIF.
[Change log](./CHANGELOG.md)
npm package: @servicensw/navigation
Description: Navigation components
Author: PreviousNext
Latest version: 3.1.9

# @servicensw/navigation

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-styleguide.html#kssref-styleguide-navigation)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/navigation --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/navigation';`
- Sass/Eyeglass: `@import 'servicensw-navigation';`
- Native CSS: `@import url('dist/navigation.css');`
- Link tag: `<link href="dist/navigation.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import {
  StickyNav,
  SecondaryNav,
  TableOfContents,
} from "@servicensw/navigation"

new StickyNav("#stickyNav:not(.is-excluded)", "#stickyNavContainer")
new SecondaryNav("#secondaryNav:not(.is-excluded)")
new TableOfContents("#toc:not(.is-excluded)", "#tocContainer")
```

Legacy usage;

- IIFE: `<script src="dist/navigation.js" type="text/javascript"></script>` (initialized for all above elements)
- Common JS: `const { StickyNav, SecondaryNav, TableOfContents } = require("@servicensw/regions")` (initialize yourself)
  [Change log](./CHANGELOG.md)
npm package: @servicensw/notice
Description: Notices
Author: PreviousNext
Latest version: 3.0.7

# @servicensw/notice

![notice component](https://previousnext.github.io/snsw-styleguide/screenshots/notice.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-notice.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/notice --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/notice';`
- Sass/Eyeglass: `@import 'servicensw-notice';`
- Native CSS: `@import url('dist/notice.css');`
- Link tag: `<link href="dist/notice.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="notice" role="status">
  <h2>Rockdale Service Centre is coming soon</h2>
  <p>
    Rockdale Agency will close on 9 March 2018 and re-open in April. Please
    visit Kogarah Service Centre during this closure.
  </p>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/page
Description: Page level components
Author: PreviousNext
Latest version: 2.3.7

# @servicensw/page

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-page.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/page --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/page';`
- Sass/Eyeglass: `@import 'servicensw-page';`
- Native CSS: `@import url('dist/page.css');`
- Link tag: `<link href="dist/page.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="page-wrapper">
  <div class="container">
    <div class="page-section">
      <h2>Section title</h2>
      <p>Section content</p>
    </div>
  </div>
</div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/pagination
Description: pagination component
Author: PreviousNext
Latest version: 1.0.8

# @servicensw/pagination

![pagination  component](https://previousnext.github.io/snsw-styleguide/screenshots/pagination.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-pagination.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/pagination --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/pagination';`
- Sass/Eyeglass: `@import 'servicensw-pagination';`
- Native CSS: `@import url('dist/pagination.css');`
- Link tag: `<link href="dist/pagination.css" rel="stylesheet" type="text/css">`
npm package: @servicensw/regions
Description: Region toggle component
Author: PreviousNext
Latest version: 2.2.28

# @servicensw/regions

Regions that show/hide. Suitable to be used with drop menus or tab navigation.

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-region-toggle.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/regions --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/regions';`
- Sass/Eyeglass: `@import 'servicensw-regions';`
- Native CSS: `@import url('dist/regions.css');`
- Link tag: `<link href="dist/regions.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import RegionToggle from "@servicensw/regions"

const regionToggles = document.querySelectorAll(".regions:not(.is-excluded)")
regionToggles.forEach(element => {
  new RegionToggle(element)
})
```

Legacy usage;

- IIFE: `<script src="dist/region-toggle.js" type="text/javascript"></script>` (initialized for all `.regions` elements)
- Common JS: `const RegionToggle = require("@servicensw/regions")` (initialize yourself)

**HTML**

```html
<ul>
  <li><a aria-controls="showHideRegion1">Region 1</a></li>
  <li><a aria-controls="showHideRegion2">Region 2</a></li>
  <li><a aria-controls="showHideRegion3">Region 3</a></li>
</ul>
<div class="regions">
  <div role="region" id="showHideRegion1" aria-label="Region 1">
    <p>Region 1</p>
  </div>
  <div role="region" id="showHideRegion2" aria-label="Region 2">
    <p>Region 2</p>
  </div>
  <div role="region" id="showHideRegion3" aria-label="Region 3">
    <p>Region 3</p>
  </div>
</div>
```

### Developer notes

Each region must have an `id` and `role="region"` attribute. The toggle
for that region must have an `aria-controls` atttribute with the regions `id` as its value.
[Change log](./CHANGELOG.md)
npm package: @servicensw/responsive-table
Description: responsive-table component
Author: PreviousNext
Latest version: 1.0.8

# @servicensw/responsive-table

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-responsive-table.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/responsive-table --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/responsive-table';`
- Sass/Eyeglass: `@import 'servicensw-responsive-table';`
- Native CSS: `@import url('dist/responsive-table.css');`
- Link tag: `<link href="dist/responsive-table.css" rel="stylesheet" type="text/css">`

**JavaScript**

```js
import ResponsiveTable from "@servicensw/responsive-table"

new ResponsiveTable("table:has(tbody th):not(.table--not-responsive)")
```

Legacy usage;

- IIFE: `<script src="dist/responsive-table.js" type="text/javascript"></script>` (initialized for all `table:has(tbody th):not(.table--not-responsive)` elements)
- Common JS: `const ResponsiveTable = require("@servicensw/responsive-table")` (initialize yourself)
npm package: @servicensw/social
Description: Social sharing component
Author: PreviousNext
Latest version: 3.0.7

# @servicensw/social

A Social sharing widget that automatically creates sharing links for Facebook,
Twitter, LinkedIn, WhatsApp, and email.

![Social component](https://previousnext.github.io/snsw-styleguide/screenshots/social.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-social-sharing.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/social --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/social';`
- Sass/Eyeglass: `@import 'servicensw-social';`
- Native CSS: `@import url('dist/css/social.css');`
- Link tag: `<link href="dist/css/social.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import '@servicensw/social';`
- Script tag: `<script src="dist/social-sharing.js" type="text/javascript"></script>`

Vanilla JS is called on `DOMContentLoaded` for the first `#socialSharing` element.

Alternatively, initialise it manually for a specific CSS selector:

```js
import SocialSharing from "@servicensw/social"

new SocialSharing("#socialSharing:not(.is-excluded)")
```

**HTML**

```html
<div id="socialSharing" class="social-sharing"></div>
```

[Change log](./CHANGELOG.md)
npm package: @servicensw/tiles
Description: Promotional tile components
Author: PreviousNext
Latest version: 3.1.6

# @servicensw/tiles

![tiles component](https://previousnext.github.io/snsw-styleguide/screenshots/tiles.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-styleguide.html#kssref-styleguide-tiles)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/tiles --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/tiles';`
- Sass/Eyeglass: `@import 'servicensw-tiles';`
- Native CSS: `@import url('dist/tiles.css');`
- Link tag: `<link href="dist/tiles.css" rel="stylesheet" type="text/css">`
  [Change log](./CHANGELOG.md)
npm package: @servicensw/translate
Description: Translate component
Author: PreviousNext
Latest version: 2.9.7

# @servicensw/translate

Translate component that will translate an entire website using Googles [Website translator](https://translate.google.com/manager/website/) service.

![translate component](https://previousnext.github.io/snsw-styleguide/screenshots/translate.png)

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-translate.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/translate --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@servicensw/translate';`
- Sass/Eyeglass: `@import 'servicensw-translate';`
- Native CSS: `@import url('dist/translate.css');`
- Link tag: `<link href="dist/translate.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import Translate from "@servicensw/translate"

const translate = document.querySelectorAll(".translate:not(.is-excluded)")
translate.forEach((element, index) => {
  new Translate(element, index)
})
```

Legacy usage;

- IIFE: `<script src="dist/translate.js" type="text/javascript"></script>` (initialized for all `.translate` elements)
- Common JS: `const Translate = require("@servicensw/translate")` (initialize yourself)

**HTML**

```html
<div class="translate"></div>
```

[Change log](./CHANGELOG.md)