wix-style-react
Version:
244 lines (240 loc) • 9.49 kB
JavaScript
import React from 'react';
import CardFolderTabs from '..';
import Badge from '../../Badge';
import Box from '../../Box';
import Card from '../../Card';
import Divider from '../../Card/Divider';
import Heading from '../../Heading';
import { Layout, Cell } from '../../Layout';
import Radio from '../../Radio';
import Text from '../../Text';
import TextButton from '../../TextButton';
import * as Icons from 'wix-ui-icons-common';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
export default () => {
const [activeTabId, setActiveTabId] = React.useState('1');
const [selectedWebsitePlanId, setSelectedWebsitePlanId] = React.useState(1);
const [selectedBusinessPlanId, setSelectedBusinessPlanId] = React.useState(0);
return (
<StorybookComponents.Stack flexDirection="column" width="50%">
<CardFolderTabs
maxTabWidth="auto"
activeId={activeTabId}
onTabChange={tabId => setActiveTabId(tabId)}
>
<CardFolderTabs.Tab id="1" name="Website Plans">
<Card>
<Card.Content>
<Layout cols={1} gap="18px">
<Radio
checked={selectedWebsitePlanId === 0}
onChange={() => setSelectedWebsitePlanId(0)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">VIP</Heading>
</Box>
<Text size="small" secondary>
First Priority Support
</Text>
</Box>
<Heading appearance="H4">
$24,50 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<Radio
checked={selectedWebsitePlanId === 1}
onChange={() => setSelectedWebsitePlanId(1)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">Unlimited</Heading>
<Badge size="small" skin="premium" type="outlined">
Most popular
</Badge>
</Box>
<Text size="small" secondary>
Entrepreneurs & Freelancers
</Text>
</Box>
<Heading appearance="H4">
$12,50 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<Radio
checked={selectedWebsitePlanId === 2}
onChange={() => setSelectedWebsitePlanId(2)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">Combo</Heading>
</Box>
<Text size="small" secondary>
For Personal Use
</Text>
</Box>
<Heading appearance="H4">
$8,50 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<Radio
checked={selectedWebsitePlanId === 3}
onChange={() => setSelectedWebsitePlanId(3)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">Connect Domain</Heading>
</Box>
<Text size="small" secondary>
Most Basic
</Text>
</Box>
<Heading appearance="H4">
$4,50 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<TextButton suffixIcon={<Icons.ExternalLink />}>
See all plan features
</TextButton>
</Layout>
</Card.Content>
</Card>
</CardFolderTabs.Tab>
<CardFolderTabs.Tab id="2" name="Business Plans">
<Card>
<Card.Content>
<Layout cols={1} gap="18px">
<Radio
checked={selectedBusinessPlanId === 0}
onChange={() => setSelectedBusinessPlanId(0)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">Business VIP</Heading>
</Box>
<Text size="small" secondary>
Get the Full Suite
</Text>
</Box>
<Heading appearance="H4">
$35 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<Radio
checked={selectedBusinessPlanId === 1}
onChange={() => setSelectedBusinessPlanId(1)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">
Business Unlimited
</Heading>
<Badge size="small" skin="premium" type="outlined">
Most popular
</Badge>
</Box>
<Text size="small" secondary>
Grow Your Business
</Text>
</Box>
<Heading appearance="H4">
$25 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<Radio
checked={selectedBusinessPlanId === 2}
onChange={() => setSelectedBusinessPlanId(2)}
label={
<Cell>
<Box
width="100%"
align="space-between"
verticalAlign="middle"
>
<Box direction="vertical">
<Box verticalAlign="middle" gap="9px">
<Heading appearance="H4">Business Basic</Heading>
</Box>
<Text size="small" secondary>
Accept Online Payments
</Text>
</Box>
<Heading appearance="H4">
$17 <Text size="small"> /month</Text>
</Heading>
</Box>
</Cell>
}
/>
<Divider />
<TextButton suffixIcon={<Icons.ExternalLink />}>
See all plan features
</TextButton>
</Layout>
</Card.Content>
</Card>
</CardFolderTabs.Tab>
</CardFolderTabs>
</StorybookComponents.Stack>
);
};