Table of Contents

1. Introduction
2. Installation
3. Importing the component
4. Peer Dependencies
5. Props
6. Contributing

pie-card-container

pie-card-container 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-card-container in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-card-container

# yarn
$ yarn add @justeattakeaway/pie-card-container

For full information on using PIE components as part of an application, check out the Getting Started Guide.

Importing the component

// default
import { PieCardContainer } from '@justeattakeaway/pie-card-container';

// react
import { PieCardContainer } from '@justeattakeaway/pie-card-container/dist/react';

Peer Dependencies

[!IMPORTANT] When using pie-card-container, you will also need to include a couple of dependencies to ensure the component renders as expected. See the PIE Wiki for more information and how to include these in your application.

Props

| Property | Type | Default | Description | |---|---|-------------|------------------------------------------------------------------------------------------------------------------------------| | tag | String | button | What HTML element the card should be such as a or button | variant | string | default | What style variant the card should be such as default, outline, inverse or outline-inverse | | disabled | boolean | false | When true, the card container is disabled. | | href | string | undefined | The URL that the card should point to (this will not take effect unless the card is a link). | | target | string | undefined | Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link). | | rel | string | undefined | What the relationship of the linked URL is (this will not take effect unless the card is a link). | | aria | object | undefined | The ARIA labels used for various parts of the card. | | isDraggable | boolean | false | Sets a grab/grabbing cursor when set to true. Note: the actual dragging capabilities should be implemented by the consuming application. | | padding | String | undefined | Sets the padding of the card container. Can be either a single value or two values separated by commas. Setting a single value adds padding to all sides of the card, whereas setting two values will set the "topBottom, leftRight" padding. e.g 'a' or 'a, b' |

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

<!-- Native HTML -->
<pie-card-container disabled href="/foo/bar" rel="noopener" target="_blank"></pie-card-container>

<!-- JSX -->
<PieCardContainer disabled href="/foo/bar" rel="noopener" target="_blank"></PieCardContainer>

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.