Dennis Simon
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Badge } from '../app/components/Badge';
|
|
import { MultiSelectCard } from '../app/components/MultiselectCard';
|
|
import { MultiSelectGroup } from '../app/components/MultiSelectGroup';
|
|
import { Book } from '../app/icons/Book';
|
|
import { Database } from '../app/icons/Database';
|
|
import { Flash } from '../app/icons/Flash';
|
|
import { FastBackward } from '../app/icons/FastBackward';
|
|
import { Swap } from '../app/icons/Swap';
|
|
|
|
const meta: Meta<typeof MultiSelectGroup> = {
|
|
title: 'Components/MultiSelectGroup',
|
|
component: MultiSelectGroup,
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof MultiSelectGroup>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
label: 'What 0x products should be enabled?',
|
|
children: [
|
|
<MultiSelectCard
|
|
title="Swap API"
|
|
description="Access efficient liquidity for powering token swaps"
|
|
icon={<Swap />}
|
|
id="swap-api"
|
|
selected={true}
|
|
key="swap-api"
|
|
/>,
|
|
<MultiSelectCard
|
|
title="Orderbook API"
|
|
description="Power limit orders in your application"
|
|
icon={<Book />}
|
|
id="orderbook-api"
|
|
selected={true}
|
|
key="orderbook-api"
|
|
/>,
|
|
<MultiSelectCard
|
|
title="Token Registry"
|
|
description="Access the 0x curated token list"
|
|
icon={<Database />}
|
|
id="token-registry"
|
|
labelDecorator={
|
|
<Badge color="blue" className="px-2 py-0 text-sm" roundness="xl">
|
|
Beta
|
|
</Badge>
|
|
}
|
|
selected={true}
|
|
key="token-registry"
|
|
/>,
|
|
<MultiSelectCard
|
|
title="Tx History"
|
|
description="Get transaction history for 0x transactions"
|
|
icon={<FastBackward />}
|
|
id="transaction-history"
|
|
labelDecorator={
|
|
<Badge color="blue" className="px-2 py-0 text-sm" roundness="xl">
|
|
Beta
|
|
</Badge>
|
|
}
|
|
selected={true}
|
|
key="transaction-history"
|
|
/>,
|
|
<MultiSelectCard
|
|
title="Tx Relay"
|
|
description="Power seamless UX with gasless trades"
|
|
icon={<Flash />}
|
|
id="tx-relay"
|
|
selected={true}
|
|
key="tx-relay"
|
|
/>,
|
|
],
|
|
},
|
|
};
|