Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: move description not prod ready stories #493

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: move description not prod ready stories #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f97c46
docs: move description not prod ready stories
gabyzif Nov 15, 2024
c8c78db
Merge branch 'main' into docs/descriptions
gabyzif Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 0 additions & 331 deletions src/components/data-display/Descriptions/Descriptions.stories.tsx
View file
Open in desktop
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
Loading