Card Select

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as CardSelectStories from './CardSelect.stories';

<Meta of={CardSelectStories} name='Usage' />

<Title />

## Purpose

The PDS Card Select with a `shadow` prop, for dense layouts and surfaces where the card drop shadow is too heavy.

## Usage

- `shadow={true}` (default) is the unchanged PDS Card Select.
- `shadow={false}` removes the drop shadow. An unselected card has a border in the input border color. On hover the card background gets a tint, the same as the secondary Button hover. The selected card is marked by the check indicator; with `showIndicator={false}` it is marked by the focus ring instead.
- Everything else is the PDS Card Select: `options` (`label`, `value`, composable `children`), `defaultValue`, `onChange`, `background`, `size`, `layout`, `padding`, `imageVariant`, `showIndicator` and `showCardLabels`.
- It is built on the published Card Select, so the radio inputs, keyboard focus ring and labels come with it.

## Implementation

See the table below for the available props. The stories show the shadow on and off, with and without the radio indicator, and at the large size.

<hr />

<Canvas of={CardSelectStories.WithShadow} />
<Controls of={CardSelectStories.WithShadow} />

<Canvas of={CardSelectStories.WithoutShadow} />

<Canvas of={CardSelectStories.WithoutShadowOrIndicator} />

<Canvas of={CardSelectStories.WithoutShadowLarge} />