open-index/open-npm huggingface dataset:
npm package: @justeattakeaway/pie-list
Description: PIE Design System List built using Web Components
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.0.23

<p align="center">
  <img align="center" src="../../../readme_image.png" height="200" alt="">
</p>

<p align="center">
  <a href="https://www.npmjs.com/@justeattakeaway/pie-list">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-list.svg">
  </a>
</p>

# Table of Contents

1. [Introduction](#pie-list)
2. [Installation](#installation)
3. [Importing the component](#importing-the-component)
4. [Peer Dependencies](#peer-dependencies)
5. [Props](#props)
6. [Contributing](#contributing)

## pie-list

`pie-list` is a Web Component built using the Lit library.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.


## Installation

To install `pie-list` in your application, run the following on your command line:

```bash
# npm
$ npm i @justeattakeaway/pie-list

# yarn
$ yarn add @justeattakeaway/pie-list
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).


### Importing the component

#### JavaScript
```js
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieList } from '@justeattakeaway/pie-list';

// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-list';
```

#### React
```js
// React
// For React, you will need to import our React-specific component build
// which wraps the web component using ​@lit/react
import { PieList } from '@justeattakeaway/pie-list/dist/react';
```

> [!NOTE]
> When using the React version of the component, please make sure to also
> include React as a [peer dependency](#peer-dependencies) in your project.


## Peer Dependencies

> [!IMPORTANT]
> When using `pie-list`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.


## Props

| Property | Type | Default | Description |
|---|---|---|---|
| - | - | - | - |

In your markup or JSX, you can then use these to set the properties for the `pie-list` component:

```html
<!-- Native HTML -->
<pie-list></pie-list>

<!-- JSX -->
<PieList></PieList>
```

## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
npm package: @justeattakeaway/pie-toggle-switch
Description: PIE Design System Toggle Switch built using Web Components
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.15.0

<p align="center">
  <img align="center" src="../../../readme_image.png" height="200" alt="">
</p>

<p align="center">
  <a href="https://www.npmjs.com/@justeattakeaway/pie-toggle-switch">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-toggle-switch.svg">
  </a>
</p>

# Table of Contents

1. [Introduction](#pie-toggle-switch)
2. [Installation](#installation)
3. [Importing the component](#importing-the-component)
4. [Peer Dependencies](#peer-dependencies)
5. [Props](#props)
6. [Contributing](#contributing)

## pie-toggle-switch

`pie-toggle-switch` is a Web Component built using the Lit library.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.


## Installation

To install `pie-toggle-switch` in your application, run the following on your command line:

```bash
# npm
$ npm i @justeattakeaway/pie-toggle-switch

# yarn
$ yarn add @justeattakeaway/pie-toggle-switch
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).


### Importing the component

```js
// default
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';

// react
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch/dist/react';
```


## Peer Dependencies

> [!IMPORTANT]
> When using `pie-toggle-switch`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.


## Props

| Property | Type | Default | Description |
|---|---|---|---|
| isChecked | `Boolean` | false | Indicates whether the switch is on or off |
| isDisabled | `Boolean` | false | Indicates whether the switch is disabled or not |
| aria  | `Object`  | `undefined`  | An object representing the aria labels `label` & `describedBy` that can be used on the toggle-switch;

In your markup or JSX, you can then use these to set the properties for the `pie-toggle-switch` component:

```html
<!-- Native HTML -->
<pie-toggle-switch></pie-toggle-switch>

<!-- JSX -->
<PieToggleSwitch></PieToggleSwitch>
```

## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
npm package: @justeattakeaway/pie-webc
Description: Component bundle containing all PIE web components
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.9.10

<p align="center">
  <img align="center" src="../../../readme_image.png" height="200" alt="">
</p>

<p align="center">
  <a href="https://www.npmjs.com/@justeattakeaway/pie-webc">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg">
  </a>
</p>


# Table of Contents

1. [Introduction](#pie-webc)
2. [Installation](#installation)
3. [Contributing](#contributing)


## pie-webc

`pie-webc` is a wrapper package which contains **all** PIE web components.

This means that after installing this package as a dependency, you can use as many PIE web components as you like, without bloating your application with unused code, or slowing it down with unnecessary component registrations in the browser.


## Installation

To install `pie-webc` in your application, run the following on your command line:

```bash
npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc
```


## Importing components

Simply import each component individually using its specific entrypoint.

```js
import '@justeattakeaway/pie-webc/components/button.js';
import '@justeattakeaway/pie-webc/components/modal.js';
```

Or for React applications:

```js
import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).


## For maintainers

There is a command that can be run (from the root of the monorepo) which adds all PIE components to this package:

```npx add-components```

This does the following:
1. Loops through the (root) `packages/components` folder to find all of the PIE components, ignoring non-component folders, helper packages, and this package itself.
2. Adds a `.js` and `.d.ts` file for each component to both the `components` and `react` directories (inside `pie-webc`).
3. Adds entries for each component to the `exports` field in `pie-webc/package.json`.
4. Adds entries for each component to the `dependencies` field in `pie-webc/package.json`, using the current (latest) version.

**Generally, there should be no need to run this script.** The only time it should be run is when a new component is created using the [component generator](../../tools/generator-pie-component/README.md). The generator runs this script automatically after creating a new component.

`changeset` should also make sure that the versions of components are up-to-date.


## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development).
npm package: @justeattakeaway/pie-webc-testing
Description: PIE design system helpers and utilities for testing our web components
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.13.5

<p align="center">
  <img align="center" src="../../../readme_image.png" height="200" alt="">
</p>

# pie-webc-testing

A core library containing classes, utilities and anything else to assist with testing our web components.
npm package: @justeattakeaway/stylelint-no-logical-props-shorthands
Description: Stylelint plugin for disallowing logical props shorthands.
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.3.0

# stylelint-no-logical-props-shorthands

[![npm version](https://badge.fury.io/js/@justeattakeaway%stylelint-no-logical-props-shorthands.svg)](https://badge.fury.io/js/@justeattakeaway%stylelint-no-logical-props-shorthands)

A Stylelint plugin used in PIE – Just Eat Takeaway’s design system.

This plugin was created to prevent the usage of logical property shorthands in CSS. This is because they are not fully supported in Safari versions 14 and 15, and we want to avoid using them in our design system.

Example:

```scss
/* ❌ Fails when use logical props shorthands + variables */
padding-block: var(--dt-spacing-e);
padding-inline: var(--dt-spacing-e);

/* ✅ Works when we use regular logical properties */
padding-block-start: var(--dt-spacing-e);
padding-block-end: var(--dt-spacing-e);
padding-inline-start: var(--dt-spacing-e);
padding-inline-end: var(--dt-spacing-e);
```


## Installation

```bash
npm install @justeattakeaway/stylelint-no-logical-props-shorthands --save-dev
```

## Usage

Add the plugin to your Stylelint config `plugins` array, and also to the `rules` object.

```js
{
  "plugins": [
    "@justeattakeaway/stylelint-no-logical-props-shorthands"
  ],
  "rules": {
    '@justeattakeaway/stylelint-no-logical-props-shorthands': true,
  }
}
```

Regular usage will show error messages in the console when you use logical property shorthands.

Example:

```bash
✖  Disallowed usage of CSS logical property shorthand "margin-inline"   @justeattakeaway/stylelint-no-logical-props-shorthands
✖  Disallowed usage of CSS logical property shorthand "margin-block"    @justeattakeaway/stylelint-no-logical-props-shorthands
```

### Fixing errors

The plugin supports the `--fix` flag (autofix) and will automatically replace the logical property shorthands with regular logical properties.