open-index/open-npm huggingface dataset:
npm package: @slice-and-dice/govuk-react-paragraph
Description: Renders a styled paragraph around children, also supporting and styling sub-elements from markdown and accepting several optional props.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Paragraph
=========

### Import
```js
  import Paragraph from '@govuk-react/paragraph';
```
<!-- STORY -->

Supports bold, italic, links, inline code and block code in Markdown ONLY.
This is to ensure we follow GDS as closely as possible.
It is worth noting that GDS recommends avoiding bold and italics.

Bold should be avoided in general as not only can it dilute the message, it will also
cause Screenreaders to increase the volume of any bold text to reflect the increase in
font-weight.

### Usage

Simple
```jsx
<Paragraph>Lorem `ipsum` **dolor** sit *amet* with [some link](https://google.com)</Paragraph>
```

As supporting text
```jsx
<Paragraph supportingText>Lorem `ipsum` **dolor** sit *amet* with [some link](https://google.com)</Paragraph>
```

With a block of code
````jsx
<Paragraph>
  Some other text...
  ```
  Some Code Block
  ```
  Some more text.
</Paragraph>
````

With React router

```jsx
const ReactRouterLinkRenderer = ({ href, children }) => (
  href.match(/^\//)
    ? <Link to={href}>{children}</Link>
    : <a href={href}>{children}</a>
);

<Paragraph linkRenderer={ReactRouterLinkRenderer}>
  ...
</Paragraph>
```

### References
- https://govuk-elements.herokuapp.com/typography/#typography-body-copy

### TODO
- Add test for supporting text
- Review code snippet styling
- Remove magic numbers from inline code styling blocks

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```''``` | node | Text content supporting markdown
 `linkRenderer` |  | ```props => <Link {...props} />``` | func | 
 `supportingText` |  | ```false``` | bool | Is this paragraph supporting text for another element?
npm package: @slice-and-dice/govuk-react-phase-banner
Description: Banner with solid background and bold text, rendered from children.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

PhaseBanner
===========

### Import
```js
  import PhaseBanner from '@govuk-react/phase-banner';
```
<!-- STORY -->

### Usage

Alpha
```jsx
<PhaseBanner level="alpha">
   This part of GOV.UK is being rebuilt &#8211;{' '}
   <AnchorLink href="https://example.com">find out what that means</AnchorLink>
 </PhaseBanner>
```

Beta
```jsx
<PhaseBanner level="beta">
   This part of GOV.UK is being rebuilt &#8211;{' '}
   <AnchorLink href="https://example.com">find out what that means</AnchorLink>
 </PhaseBanner>
```

### References:
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/phase-banner
- https://design-system.service.gov.uk/components/phase-banner/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Children text and links
 `level` | true | `````` | string | Alpha or beta banner
npm package: @slice-and-dice/govuk-react-radio
Description: Styled radio button with several configurable props.
Author: Alasdair McLeay
Latest version: 0.7.4
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Radio
=====

### Import
```js
  import Radio from '@govuk-react/radio';
```
<!-- STORY -->

### Usage

Simple
```jsx
<Radio name="group1">Radio button text example</Radio>
```

Radio stacked
```jsx
 <div>
   <Radio name="group1">Waste from animal carcasses</Radio>
   <Radio name="group1">Waste from mines or quarries</Radio>
   <Radio name="group1">Farm or agricultural waste</Radio>
 </div>
```

Radio inline
```jsx
 <div>
   <Radio name="group1" inline>
     Yes
   </Radio>
   <Radio name="group1" inline>
     No
   </Radio>
 </div>
```

Radio disabled
```jsx
 <div>
   <Radio name="group1" disabled="disabled">
     Disabled checkbox option
   </Radio>
 </div>
 ```

Radio preselected
```jsx
 <div>
   <Radio name="group1" checked>
     Farm or agricultural waste
   </Radio>
 </div>
```

Radio preselected & disabled
```jsx
 <div>
   <Radio name="group1" disabled="disabled" checked>
     Farm or agricultural waste
   </Radio>
 </div>
```
Radio with hint text
```jsx
<div>
  <Radio
   name="group1"
   hint="You'll have a user ID if you've registered for Self Assessment or filed a tax return
         online before."
  >
    Sign in with Government Gateway
  </Radio>
</div>
```
### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/radios/_radios.scss
- https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `className` |  | ```undefined``` | string | 
 `hint` |  | ```undefined``` | node | 
 `inline` |  | ```false``` | bool |
npm package: @slice-and-dice/govuk-react-related-items
Description: Container which expects to receive a heading and list and styles them accordingly.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

RelatedItems
============

### Import
```js
  import RelatedItems from '@govuk-react/related-items';
```
<!-- STORY -->

### Usage

Simple
```jsx
import { H3 } from '@govuk-react/heading';
import UnorderedList from '@govuk-react/unordered-list';
import Link from '@slice-and-dice/govuk-react-link';
import ListItem from '@govuk-react/list-item';

<RelatedItems>
  <H3>Example heading</H3>
  <UnorderedList listStyleType="none">
    <ListItem>
      <Link href="https://example.com">Link A</Link>
    </ListItem>
  </UnorderedList>
</RelatedItems>
```

### References:
- https://govuk-static.herokuapp.com/component-guide/related_items

### TODO:
- Replace CSS selectors with imported components

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Related items content
npm package: @slice-and-dice/govuk-react-search-box
Description: Styled input and button, also accepting placeholder text.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

SearchBox
=========

### Import
```js
  import SearchBox from '@govuk-react/search-box';
```
<!-- STORY -->

### Usage

Simple
```jsx
import Layout from '@govuk-react/layout';
import GridRow from '@govuk-react/grid-row';
import GridCol from '@govuk-react/grid-col';

<Layout>
   <GridRow>
     <GridCol>
       <SearchBox placeholder="Search GOV.UK">SearchBox example</SearchBox>
     </GridCol>
   </GridRow>
 </Layout>
```

### References:
- https://govuk-static.herokuapp.com/component-guide/search

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `placeholder` |  | ```undefined``` | string |
npm package: @slice-and-dice/govuk-react-section-break
Description: govuk-react SectionBreak component.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

SectionBreak
============

### Import
```js
  import SectionBreak from '@govuk-react/section-break';
```
<!-- STORY -->

### Usage

Simple
```jsx
<SectionBreak>Example</SectionBreak>
```

### References
- https://design-system.service.gov.uk/styles/typography/#section-break
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_section-break.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `level` |  | `````` | enum('XL' \| 'XLARGE' \| 'L' \| 'LARGE' \| 'M' \| 'MEDIUM') | 
 `visible` |  | ```undefined``` | bool |
npm package: @slice-and-dice/govuk-react-select
Description: Styled select menu, taking its options as children and with various configurable parameters via props.
Author: Alasdair McLeay
Latest version: 0.7.5
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Select
======

### Import
```js
  import Select from '@govuk-react/select';
```
<!-- STORY -->

### Usage

Simple
```jsx
 <Select name="group1" label="This is a label">
    <option value="0">GOV.UK elements option 1</option>
    <option value="1">GOV.UK elements option 2</option>
    <option value="2">GOV.UK elements option 3</option>
  </Select>
```

Select with hint text
```jsx
<Select
   name="group1"
   label="This is a label"
   hint={[
     'This is and example of hintText/description of what we need from you.',
   ]}
 >
   <option value="0">GOV.UK elements option 1</option>
   <option value="1">GOV.UK elements option 2</option>
   <option value="2">GOV.UK elements option 3</option>
 </Select>
```

Select with hint text & error
```jsx
const meta = {
  touched: true,
  error: 'Example',
};

<Select
   name="group1"
   label="This is a label"
   hint={[
     'This is and example of hintText/description of what we need from you.',
   ]}
   meta={meta}
 >
   <option value="0">GOV.UK elements option 1</option>
   <option value="1">GOV.UK elements option 2</option>
   <option value="2">GOV.UK elements option 3</option>
 </Select>
```

Standalone input with inline label
```jsx
import LabelText from '@govuk-react/label-text';
import { SelectInput } '@govuk-react/select';

<label>
   <LabelText>Sort by:&nbsp;
     <SelectInput>
       <option value="0">People</option>
       <option value="1">Animals</option>
       <option value="2">Vegetables</option>
     </SelectInput>
   </LabelText>
 </label>
```

### References:
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/select

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `errorText` |  | ```undefined``` | string | 
 `hint` |  | ```undefined``` | string | 
 `input` |  | ```{}``` | shape[object Object] | 
 `label` | true | `````` | string | 
 `meta` |  | ```{}``` | shape[object Object] |
npm package: @slice-and-dice/govuk-react-skip-link
Description: govuk-react SkipLink component.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

SkipLink
========

### Import
```js
  import SkipLink from '@govuk-react/skip-link';
```
<!-- STORY -->

### Usage

Use the skip link component to help keyboard-only users skip to the main content on a page.

Simple
```jsx
<SkipLink href="#main-content">Skip to main content</SkipLink>
```

### References
- https://design-system.service.gov.uk/components/skip-link/
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/skip-link

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` |  | ```'Skip to main content'``` | node | 
 `href` |  | ```'#content'``` | string |
npm package: @slice-and-dice/govuk-react-supporting-header
Description: Renders children passed inside a styled span element.
Author: Toby Brancher
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

SupportingHeader
================

### Import
```js
  import SupportingHeader from '@govuk-react/supporting-header';
```
<!-- STORY -->

### Usage

This component is DEPRECATED.

Please use the `Caption` component instead.

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | string | Text to be rendered as a supporting header
npm package: @slice-and-dice/govuk-react-table
Description: A styled table supporting a 'construction kit' approach and rendering children as constituent parts.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Table
=====

### Import
```js
  import Table from '@govuk-react/table';
```
<!-- STORY -->

### Usage

The Table component provides a construction kit of elements to create a table

Component default
```jsx
<Table caption="Dates and amounts">
 <Table.Row>
   <Table.CellHeader>First 6 weeks</Table.CellHeader>
   <Table.Cell>£109.80 per week</Table.Cell>
 </Table.Row>
 <Table.Row>
   <Table.CellHeader>Next 33 weeks</Table.CellHeader>
   <Table.Cell>£109.80 per week</Table.Cell>
 </Table.Row>
 <Table.Row>
   <Table.CellHeader>Total estimated pay</Table.CellHeader>
   <Table.Cell>£4,282.20</Table.Cell>
 </Table.Row>
 <Table.Row>
   <Table.CellHeader>Tell the mother&rsquo;s employer</Table.CellHeader>
   <Table.Cell>28 days before they want to start maternity pay</Table.Cell>
 </Table.Row>
</Table>
```

Numeric tabular data
```jsx
const example2Head = (
  <Table.Row>
    <Table.CellHeader>Month you apply</Table.CellHeader>
    <Table.CellHeader numeric>Rate for vehicles</Table.CellHeader>
    <Table.CellHeader numeric>Rate for bicycles</Table.CellHeader>
  </Table.Row>
);

<Table
 caption="Attention, I am the caption of this ship!"
 head={example2Head}
>
  <Table.Row>
    <Table.CellHeader>January</Table.CellHeader>
    <Table.Cell numeric>£165.00</Table.Cell>
    <Table.Cell numeric>£85.00</Table.Cell>
  </Table.Row>
  <Table.Row>
    <Table.CellHeader>February</Table.CellHeader>
    <Table.Cell numeric>£165.00</Table.Cell>
    <Table.Cell numeric>£85.00</Table.Cell>
  </Table.Row>
  <Table.Row>
    <Table.CellHeader>March</Table.CellHeader>
    <Table.Cell numeric>£151.00</Table.Cell>
    <Table.Cell numeric>£77.00</Table.Cell>
  </Table.Row>
  <Table.Row>
    <Table.CellHeader>April</Table.CellHeader>
    <Table.Cell numeric>£136.00</Table.Cell>
    <Table.Cell numeric>£70.00</Table.Cell>
  </Table.Row>
</Table>
```

Setting custom column widths
```jsx
<Table
  caption="Custom header"
  head={
    <Table.Row>
      <Table.CellHeader setWidth="one-half>Wide header</Table.CellHeader>
      <Table.CellHeader setWidth="30%">Regular</Table.CellHeader>
      <Table.CellHeader>Normal</Table.CellHeader>
    </Table.Row>
  }
>
  <Table.Row>
    <Table.Cell>Header makes this column one-half wide</Table.Cell>
    <Table.Cell>And this one 30%</Table.Cell>
    <Table.Cell>Another</Table.Cell>
  </Table.Row>
</Table>
```

### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/table/_table.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `body` |  | ```undefined``` | node | Table body rows and cells (for backward compatibility)
 `caption` |  | ```undefined``` | string | Table caption title
 `children` |  | ```undefined``` | node | Table body rows and cells (recommended way)
 `head` |  | ```undefined``` | node | Table header rows and cells
npm package: @slice-and-dice/govuk-react-tag
Description: Badge with solid background and bold text, rendered from children.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

Tag
===

### Import
```js
  import Tag from '@govuk-react/tag';
```
<!-- STORY -->

### Usage

Simple
```jsx
<Tag>beta</Tag>
```

### References:
- https://design-system.service.gov.uk/components/tag/
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/tag/_tag.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `inactive` |  | ```false``` | bool |
npm package: @slice-and-dice/govuk-react-text-area
Description: Styled textarea supporting additional parameters via props.
Author: Alasdair McLeay
Latest version: 0.7.4
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

TextArea
========

### Import
```js
  import TextArea from '@govuk-react/text-area';
```
<!-- STORY -->

### Usage

Simple
```jsx
<TextArea name="group1">Description of what you saw</TextArea>
```

TextArea with hint text
```jsx
<TextArea name="group1" hint={['Enter as many words as you like']}>
  Description of what you saw
</TextArea>
```

TextArea with hint text & error
```jsx
const meta = {
  touched: true,
  error: 'Example',
};

<TextArea
   name="group1"
   hint={['Enter as many words as you like']}
   meta={meta}
 >
   Description of what you saw
 </TextArea>
```

### References:
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/textarea

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | 
 `hint` |  | ```undefined``` | string | 
 `input` |  | ```{}``` | shape[object Object] | 
 `meta` |  | ```{}``` | shape[object Object] |
npm package: @slice-and-dice/govuk-react-unordered-list
Description: Renders an unordered list containing children passed - also supports listStyleType prop.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

UnorderedList
=============

### Import
```js
  import UnorderedList from '@govuk-react/unordered-list';
```
<!-- STORY -->

### Usage

Simple
```jsx
import UnorderedList from '@govuk-react/unordered-list';
import ListItem from '@slice-and-dice/govuk-react-list-item';

<UnorderedList>
  <ListItem>Lorem ipsum dolor sit.</ListItem>
  <ListItem>Consectetur adipiscing elit.</ListItem>
  <ListItem>Curabitur et libero nec.</ListItem>
</UnorderedList>
```

with Roman
```jsx
import UnorderedList from '@govuk-react/unordered-list';
import ListItem from '@slice-and-dice/govuk-react-list-item';

<UnorderedList listStyleType="lower-roman">
  <ListItem>Lorem ipsum dolor sit.</ListItem>
  <ListItem>Consectetur adipiscing elit.</ListItem>
  <ListItem>Curabitur et libero nec.</ListItem>
</UnorderedList>
```

### References
- https://design-system.service.gov.uk/styles/typography/#lists
- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_lists.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | One or more ListItem components
 `listStyleType` |  | ```undefined``` | string | CSS value for `list-style-type`, or `bullet` or `number` to match govuk-frontend
npm package: @slice-and-dice/govuk-react-visually-hidden
Description: govuk-react VisuallyHidden component.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

VisuallyHidden
==============

### Import
```js
  import VisuallyHidden from '@govuk-react/visually-hidden';
```
<!-- STORY -->

### Usage

This component is primarily intended to be used for material that will be visually hidden
but visible to screen-reader devices.

Simple
```jsx
<VisuallyHidden>Example</VisuallyHidden>
```

### References
- https://github.com/alphagov/govuk-frontend/blob/master/src/helpers/_visually-hidden.scss
- https://github.com/alphagov/govuk-frontend/blob/master/src/utilities/_visually-hidden.scss

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Content to be hidden
 `focusable` |  | ```false``` | bool | Allow component to be focusable, and thus become visible
 `important` |  | ```true``` | bool | Set styles with `!important`
npm package: @slice-and-dice/govuk-react-warning-text
Description: Styles children passed within a div and strong element, also positioning an 'Important' icon to the left.
Author: Gavin Orland
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

WarningText
===========

### Import
```js
  import WarningText from '@govuk-react/warning-text';
```
<!-- STORY -->

### Usage

Simple
```jsx
<WarningText>Example</WarningText>
```

### References:
- https://govuk-elements.herokuapp.com/typography/#typography-warning-text
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/warning-text

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | Warning text to be displayed
npm package: @slice-and-dice/hint-text
Description: Renders a styled span element with children provided.
Author: Alasdair McLeay
Latest version: 0.7.1
Deprecated: This package is no longer used by RAFB and is not maintained so may be insecure

# HintText

### Import

```js
import HintText from '@slice-and-dice/hint-text';
```

<!-- STORY -->

### Usage

Simple

```jsx
<HintText>Example</HintText>
```

### References

- https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss

### Properties

| Prop       | Required | Default                       | Type | Description |
| :--------- | :------- | :---------------------------- | :--- | :---------- |
| `children` | true     | `` | node | Text for the hint |
npm package: @slice-and-dice/register-a-food-business-validation
Description: Validation functions for the register a food business service
Author: Django Shelton
Latest version: 1.30.2

# Contributing to this repository

To contribute to this repository, you must use clone the [register-a-food-business-validation package](https://github.com/FoodStandardsAgency/register-a-food-business-validation). To use it you must install it as an npm package in your repositary using `npm i register-a-food-business-service`.

It is recommended that you install the Prettier code-formatting extension for your IDE. For more information about using the Prettier extension, see the [Best practices and code standards]() contribution guide.

## Detailed contribution guides

The following contribution guides are available:

### High-level tasks

- [Adding a new validation function](./docs/contribution-guidelines/adding-a-new-validation-function.md)
- [Using the existing npm validator package to create a custom validation function](./docs/contribution-guidelines/using-npm-validator-package-for-custom-validation.md)
- [Modifying an existing validation function](./docs/contribution-guidelines/modifying-an-existing-validation-function.md)
- [Exporting a new validation function](./docs/contribution-guidelines/exporting-a-new-validation-function.md)
- [Re-publishing the repository as an npm package](./docs/contribution-guidelines/republishing-the-repository-as-an-npm-package.md)
- [Writing unit tests](./docs/contribution-guidelines/writing-unit-tests.md)
npm package: @slice-so/react
Description: Slice react functional components
Author: slice-so
Latest version: 0.0.36

# Slice react-ui

## Installation

```bash
npm install @slice-so/react-ui
```

## Usage

```jsx
import React from 'react';
import { Checkout } from '@slice-so/react-ui';
// import styles
import "@slice-so/react-ui/dist/style.css"
import "@rainbow-me/rainbowkit/styles.css"

const cart = /* ... */;

export const ExampleUsage = () => {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <SliceProvider chains={chains} initCart={cart}>
          <div>
            <div>
              <ConnectBlock />
            </div>
            <Checkout />
          </div>
        </SliceProvider>
      </WagmiConfig>
    </>
  )
}

export default ExampleUsage;
```
npm package: @slice-so/react-ui
Description: Slice react ui functional components
Author: slice-so
Latest version: 0.0.18

# Slice react-ui

## Installation

```bash
npm install @slice-so/react-ui
```

## Usage

```jsx
import React from 'react';
import { Checkout } from '@slice-so/react-ui';
// import styles
import "@slice-so/react-ui/dist/style.css"
import "@rainbow-me/rainbowkit/styles.css"

const cart = /* ... */;

export const ExampleUsage = () => {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <SliceProvider chains={chains} initCart={cart}>
          <div>
            <div>
              <ConnectBlock />
            </div>
            <Checkout />
          </div>
        </SliceProvider>
      </WagmiConfig>
    </>
  )
}

export default ExampleUsage;
```
npm package: @slicemenice/dom-utils
Description: ECMAScript 6 DOM Utilities
Author: Stefan Ullinger
Latest version: 2.1.0

# domUtils
ECMAScript 6 DOM Utilities

---

* [getElementSize()](#getelementsize) collects box model values (margin, border, padding, width and height) of an element.
* [getPrefixedPropertyName()](#getprefixedpropertyname) converts a CSS property name into a vendor specific property name if necessary.

---

### getElementSize
Collects box model values (margin, border, padding, width and height) of an element.

###### Example

```
import { getElementSize } from 'event-utils';

let size = getElementSize( element );
```

###### Parameters

* _element_  
can either be a DOM element or selector string. If it is a selector string the function will get the element by calling `document.querySelector`.

###### Returns

* An object containing key-value pairs of box model values.  
  ```
  size = {
    paddingTop: ...,
	paddingRight: ...,
	paddingBottom: ...,
	paddingLeft: ...,

	marginTop: ...,
	marginRight: ...,
	marginBottom: ...,
	marginLeft: ...,

	borderTopWidth: ...,
	borderRightWidth: ...,
	borderBottomWidth: ...,
	borderLeftWidth: ...,
	
	width: ...,
	height: ...,
	
	innerWidth: ...,
	innerHeight: ...,
	
	outerWidth: ...,
	outerHeight: ...,
	
	isBorderBox: true|false|undefined
  }
  ```
* An object with all values set to zero, if the element is hidden.
* _undefined_ if the element is not a DOM node.

### getPrefixedPropertyName
Converts a CSS property name into a vendor specific property name if necessary.

###### Example

```
import { getPrefixedPropertyName } from 'event-utils';

let boxSizingPropertyName = getPrefixedPropertyName( 'boxSizing' );
```

###### Parameters

* _propertyName_  
a CSS property value.

###### Returns

* The given property name, if the browser supports it: `boxSizing`
* A vendor specific property name: `WebkitBoxSizing|MozBoxSizing|msBoxSizing|MsBoxSizing|OBoxSizing`
* _undefined_ if no propertyName was given.
npm package: @slicemenice/event-utils
Description: ECMAScript 6 Event Utilities
Author: Stefan Ullinger
Latest version: 1.1.1

# event-utils
ECMAScript 6 Event Utilities

---

* [debounce()](#debounce) returns a function, that, as long as it continues to be invoked, will not call the provided function.

---

### debounce
Returns a function, that, as long as it continues to be invoked, will not
call the provided function. The given function will be called after the debounce
function has stopped being called for N milliseconds. If `immediate` is passed, trigger
the function on the leading edge, instead of the trailing.

###### Example

```
import { debounce } from 'event-utils';

window.addEventListener( 'resize', debounce( onResize, 250, false ) );
```

###### Parameters

* _func_  
the function to be invoked, when the debounce function has stopped being called for N milliseconds.

* _wait_
is the time to wait before calling the provided function, after the debounce function has stopped being called. If `immediate` is passed, this defines the time between two calls to the given function.

* _immediate_ (optional)
defines whether to trigger the function on the leading edge, instead of the trailing.

###### Returns

* A function, that, as long as it continues to be invoked, will not call the provided function.
npm package: @slicemenice/jquery-smooth-anchor-scroll
Description: Small jQuery-based anchor scroll library
Author: SliceMeNice
Latest version: 1.1.2

# jQuery Smooth Anchor Scroll

## Usage

Include `jquery-smooth-anchor-scroll.js` to add support for smooth anchor scrolling to your website.

Optionally: Configure the scrolling duration either globally or per link element.

```
// Include this before including jquery-smooth-anchor-scroll.js

( function() {

	$( document ).ready( function() {

		window.smoothAnchorScroll = window.smoothAnchorScroll || {};

		window.smoothAnchorScroll = {
			// 600ms is the default scrolling duration
			// this can also be a function returning a duration in milliseconds
			duration: 600
		};

	} );

} )();
```

```
// Scrolling duration per link element

<a href="#some-anchor" data-smooth-anchor-scroll-duration="200">Smooth scroll to anchor</a>
```

Optionally: Configure the scrolling offset

```
// Include this before including jquery-smooth-anchor-scroll.js

( function() {

	$( document ).ready( function() {

		window.smoothAnchorScroll = window.smoothAnchorScroll || {};

		window.smoothAnchorScroll = {
			// this can also be a function returning the offset in pixels
			offset: 80
		};

	} );

} )();
```


## Release History

__1.1.3__
  * Replaced setting the url hash using `history.replaceState` if available.

__1.1.2__
  * Fixed reference to window object.

__1.1.1__

  * Exclude certain hash types.

__1.1.0__

  * Added beforeScroll and afterScroll hooks.

__1.0.0__

  * Initial version.
npm package: @slicemenice/jquery-ui-checkbox-replacement
Description: Checkbox replacement based on jQuery UI Widget
Author: SliceMeNice
Latest version: 1.1.4

# jQuery UI Checkbox Replacement

## Release History

__1.1.4__

  * Changed initialization of the checked and disabled state. Now, taking into account the input element's attributes and props.

__1.1.3__

  * Added triggering of change event, when element is being clicked.

__1.1.2__

  * Fixed selection of other radio buttons to uncheck.

__1.1.1__
  * Adapted change handler to also update the disabled state.

__1.1.0__

  * Added form reset event handler.

__1.0.2__

  * Fixed widget not being defined in _uncheckOtherRadios method.

__1.0.1__

  * Fixed other radio buttons not being unchecked when clicking a radio button, that is not wrapped with a label element.

__1.0.0__

  * Added basic component.
npm package: @slicemenice/jquery-ui-lazy-image
Description: Image lazy loading based on jQuery UI Widget and Waypoints
Author: SliceMeNice
Latest version: 1.0.1

# jQuery UI Lazy Image

## How to Use

```
$( '.lazyImage' ).each( function() {
	var $lazyImage = $( this );

	if ( !$lazyImage.data( 'smnLazyImage' ) ) {
		$lazyImage.lazyImage( {
			onImageInViewport: function( event, widget, imageUrl ) {
				// can be used to show some loading indicator
				widget.element.addClass( 'loading' );
			},
			onImageLoaded: function( event, widget, imageUrl ) {
				widget.element.hide();

				if ( widget.element.is( 'img' ) ) {
					widget.element.attr( 'src', imageUrl );
				} else {
					widget.element.css( 'background-image', 'url(' + imageUrl + ')' );
				}

				widget.element.removeClass( 'loading' );
				widget.element.addClass( 'loaded' );
				widget.element.show();
			},
			onImageFailedToLoad: function( event, widget, imageUrl ) {
				widget.element.removeClass( 'loading' );
				widget.element.addClass( 'failedToLoad' );
			}
		} );
	}
} );
```

## Release History

__2.0.0__

  * Removed dependency to Waypoint's Inview shortcut by integrating the configuration and initialization of required Waypoints into this lazy-image widget.
  * Replaced the built-in image loaded event handler with just a trigger of a custom onImageLoaded event that can be defined via the widget's settings.

__1.0.1__

  * Moved out-of-viewport handlers from exit event to exited event.

__1.0.0__

  * Added basic component.
npm package: @slicemenice/jquery-ui-popper
Description: A jQuery UI widget based component that simplifies opening and closing anything that pops up like subnavigations, toolstips, etc.
Author: SliceMeNice
Latest version: 1.0.5

# jQuery UI Popper

## Release History

__1.0.5__
  * Added package.json file.

__1.0.4__

  * Added missing var before $elementsToClose.

__1.0.3__

  * Fixed "prevent default" on link elements.

__1.0.2__

  * Fixed access of isOpen when evaluating which elements to close as this might also be called for different types / "subclasses" of poppers. Changed to check the elements data instead of using the array accessor.

__1.0.1__

  * Fixed access of isOpen when evaluating which elements to close as this might also be called for different types / "subclasses" of poppers.

__1.0.0__

  * Added basic component.
npm package: @slicemenice/jquery-ui-svg
Description: A jQuery UI widget based component that will initialize itself with a clone of the referenced element, so the resulting SVG can be manipulated individually using CSS and JavaScript
Author: SliceMeNice
Latest version: 1.0.1

# jquery-ui-svg

## Release History

__1.0.1__
  * Added package.json file.

__1.0.0__

  * Added basic component.
npm package: @slicemenice/js-hooks
Description: Manage filter and actions hooks in JavaScript.
Author: SliceMeNice
Latest version: 1.0.0

# JS Hooks

Manage filter and actions hooks in JavaScript.

## API Usage
API functions can be called via the global `hooks` like this `hooks.addAction(...)`, etc.

* `addAction( 'namespace.identifier', callback, priority )`
* `addFilter( 'namespace.identifier', callback, priority )`
* `removeAction( 'namespace.identifier' )`
* `removeFilter( 'namespace.identifier' )`
* `doAction( 'namespace.identifier', arg1, arg2, moreArgs, finalArg )`
* `applyFilters( 'namespace.identifier', content )`

## Features

* Priorities system ensures hooks with lower integer priority are fired first.
* Uses native object hash lookup for finding hook callbacks.
* Utilizes insertion sort for keeping priorities correct. Best Case: O(n), worst case: O(n^2)

## Release History

__1.0.0__

  * Forked from https://github.com/carldanley/WP-JS-Hooks and slightly adapted the existing code.
npm package: @slicemenice/off-canvas-service
Description: A lightweight service that manages off-canvas views. The top view always defines the dimensions of the body element.
Author: SliceMeNice
Latest version: 3.1.0

# off-canvas-service

[![Build Status](https://travis-ci.org/SliceMeNice/off-canvas-service.svg?branch=v1.0.0)](https://travis-ci.org/SliceMeNice/off-canvas-service)
[![GitHub issues](https://img.shields.io/github/issues/SliceMeNice/off-canvas-service.svg)](https://github.com/SliceMeNice/off-canvas-service/issues)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/SliceMeNice/off-canvas-service/master/LICENSE.txt)

> A lightweight service that manages off-canvas views. The top view always defines the dimensions of the body element.

## Release History

__3.1.0__

  * Before fixating a view, we need to save the scrollLeft and scrollTop values of all scrolled elements inside of this view (not just the body), as the scroll position will be reset during fixating the view. After fixating the view, we can then restore the scroll positions.

__3.0.0__

  * Updated codebase to support ES5 and ES Module builds.
  * Removed dependency to ES6 Map, so you might only need a polyfill for "Promise".

__2.6.3__

  * Just another version bump.

__2.6.2__

  * Added "files" field to package.json, so that the "dist" directory is included when doing an "npm install".

__2.6.1__

  * Just a version bump as I needed to unpublish v2.6.0 from npm.

__2.6.0__

  * Removed postinstall script, so the package can be installed via npm.

__2.5.0__

  * The methods "showView" and "replaceCurrentViewWith" now return a promise.

__2.4.0__

  * Added optional "skipOrCleanupCallback" parameter to the "addTransitionCallback" method that will automatically be called when a transition has finished or has been skipped.

__2.3.0__

  * Added new method "unregisterView".

__2.2.0__

  * Added new method "getNumberOfViewsOnViewstack".

__2.1.0__

  * Added skipTransitions parameter to "showView", "replaceCurrentViewWith" and "dismissCurrentView".

__2.0.0__

  * Renamed "isShowingView" to "isTopmostView", and refactored "isShowingView" to return true, if some view on the stack matches the given identifier.

__1.4.0__

  * Added new method "replaceCurrentViewWith" that can replace the current top view.

__1.3.0__

  * Moved activation of the next view to the end of the view transitions.

__1.2.0__

  * Renamed `isShowingOffCanvasView` to `isShowingView`.

__1.1.1__

  * Fixed cross-browser issues when determining the viewport's scrollLeft / scrollTop value.

__1.1.0__

  * Added method `getRegisteredViews` in order to allow updating styles (min-width, min-height) whenever the viewport resizes.

__1.0.0__

  * Added basic version of the service.
npm package: @slicemypage/motionflow
Description: MotionFlow is a free, lightweight JavaScript library for modern web motion — scroll animations, parallax, text effects, counters, and tickers using simple HTML attributes.
Author: Deepak Verma
Latest version: 1.0.0

# motionflow
MotionFlow is a free, lightweight JavaScript library for modern web motion — scroll animations, parallax, text effects, counters, and tickers using simple HTML attributes.

👉 Documentation: https://motionflow.dev