Skip to content

Commit

Permalink
docs: move description not prod ready stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabyzif
gabyzif committed Nov 15, 2024
1 parent a5afe30 commit 7f97c46
Show file tree
Hide file tree
Showing 2 changed files with 373 additions and 331 deletions.
331 changes: 0 additions & 331 deletions src/components/data-display/Descriptions/Descriptions.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import { type Meta, type StoryObj } from '@storybook/react'
import { Descriptions } from 'src/components/data-display/Descriptions/Descriptions'
import { Button } from 'src/components'
import { ExampleStory } from 'src/utils/ExampleStory'
import { type IDescriptionsProps } from 'src/components/data-display/Descriptions/Descriptions'
import { Badge } from 'src/components'
import { useState } from 'react'
import { type RadioChangeEvent } from 'antd'
import { Radio } from 'src/components'

const meta: Meta<typeof Descriptions> = {
title: 'Components/Data Display/Descriptions',
Expand Down Expand Up @@ -49,327 +42,3 @@ type Story = StoryObj<typeof Descriptions>
*/

export const Primary: Story = {}

export const Bordered: Story = {
args: {
bordered: true,
},
}

export const Vertical: Story = {
args: {
layout: 'vertical',
},
}

export const Small: Story = {
args: {
size: 'small',
},
}

export const CustomTitle: Story = {
args: {
title: <Button>Custom React Component</Button>,
},
}

export const WithExtra: Story = {
args: {
extra: <Button type="primary">Extra React Components</Button>,
},
}

export const WithTitleAndExtra: Story = {
args: {
title: <Button>Custom React Component</Button>,
extra: <Button type="primary">Extra React Components</Button>,
},
}

export const WithContentStyle: Story = {
args: {
contentStyle: { color: 'red' },
},
}

export const WithLabelStyle: Story = {
args: {
labelStyle: { fontWeight: 'bold' },
},
}

export const ResponsiveColumn: Story = {
args: {
column: { xs: 8, sm: 16, md: 24 },
},
}

export const ExampleTableLook: Story = {
render: () => {
const items: IDescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
{
key: '4',
label: 'Order time',
children: '2018-04-24 18:00:00',
},
{
key: '5',
label: 'Usage Time',
children: '2019-04-24 18:00:00',
span: 2,
},
{
key: '6',
label: 'Status',
children: <Badge status="processing" text="Running" />,
span: 3,
},
{
key: '7',
label: 'Negotiated Amount',
children: '$80.00',
},
{
key: '8',
label: 'Discount',
children: '$20.00',
},
{
key: '9',
label: 'Official Receipts',
children: '$60.00',
},
{
key: '10',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
]
return (
<ExampleStory title="Descriptions with border and background color.">
<Descriptions title="User Info" bordered items={items} />
</ExampleStory>
)
},
}

export const ExampleSize: Story = {
render: () => {
const borderedItems: IDescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
{
key: '7',
label: 'Config Info',
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</>
),
},
]

const items: IDescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing',
children: 'Prepaid',
},
{
key: '3',
label: 'Time',
children: '18:00:00',
},
{
key: '4',
label: 'Amount',
children: '$80.00',
},
{
key: '5',
label: 'Discount',
children: '$20.00',
},
{
key: '6',
label: 'Official',
children: '$60.00',
},
]
const [size, setSize] = useState<IDescriptionsProps['size']>('default')

const onChange = (e: RadioChangeEvent): void => {
console.log('size checked', e.target.value)
setSize(e.target.value as IDescriptionsProps['size'])
}
return (
<ExampleStory title="Custom sizes to fit in a variety of containers.">
<div>
<Radio.Group onChange={onChange} value={size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={size}
extra={<Button type="primary">Edit</Button>}
items={borderedItems}
/>
<br />
<br />
<Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>} items={items} />
</div>
</ExampleStory>
)
},
}

export const ExampleResponsiveDescriptions: Story = {
render: () => {
const items: IDescriptionsProps['items'] = [
{
label: 'Product',
children: 'Cloud Database',
},
{
label: 'Billing',
children: 'Prepaid',
},
{
label: 'Time',
children: '18:00:00',
},
{
label: 'Amount',
children: '$80.00',
},
{
label: 'Discount',
span: { xl: 2, xxl: 2 },
children: '$20.00',
},
{
label: 'Official',
span: { xl: 2, xxl: 2 },
children: '$60.00',
},
{
label: 'Config Info',
span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
children: (
<>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
</>
),
},
{
label: 'Hardware Info',
span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
children: (
<>
CPU: 6 Core 3.5 GHz
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
</>
),
},
]
return (
<ExampleStory title="Responsive configuration enables perfect presentation on small screen devices.">
<Descriptions
title="Responsive Descriptions"
bordered
column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
items={items}
/>
</ExampleStory>
)
},
}
Loading

0 comments on commit 7f97c46

Please sign in to comment.