Skip to content

Commit

Permalink
fix: typography updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@tibuurcio
tibuurcio committed Nov 19, 2024
1 parent 28a51b7 commit f1c7d63
Show file tree
Hide file tree
Showing 6 changed files with 331 additions and 384 deletions.
168 changes: 70 additions & 98 deletions src/components/general/Typography/Link.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,74 @@
import { type Meta } from '@storybook/react'
import { type StoryObj } from '@storybook/react'
import { Space } from 'src/components'
import type { Meta } from '@storybook/react'
import type { StoryObj } from '@storybook/react'
import { Flex, Icon, Space, Tooltip } from 'src/components'
import { Typography } from 'src/components/general/Typography/Typography'
import { ExampleStory } from 'src/utils/ExampleStory'
import { TypographyColors } from './colors'

const meta: Meta<typeof Typography.Link> = {
title: 'Components/General/Link',
title: 'Components/General/Typography/Link',
component: props => <Typography.Link {...props}>Example Link</Typography.Link>,

args: {
children: 'Example Text',
type: undefined,
color: undefined,
size: 'base',
code: false,
copyable: false,
delete: false,
disabled: false,
editable: false,
ellipsis: false,
keyboard: false,
mark: false,
strong: false,
italic: false,
type: undefined,
underline: false,
onClick: (event: React.MouseEvent) => {
console.log('Link Clicked')
},
},
argTypes: {
children: {
control: 'text',
name: 'text',
},
type: {
control: 'select',
options: ['secondary', 'success', 'warning', 'danger'],
},
size: {
control: 'select',
options: ['base', 'sm', 'lg', 'xl'],
},
color: {
control: 'select',
options: TypographyColors,
},
copyable: {
control: 'boolean',
},
delete: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
editable: {
control: 'boolean',
},
ellipsis: {
control: 'boolean',
},
mark: {
control: 'boolean',
},
strong: {
control: 'boolean',
},
italic: {
control: 'boolean',
},
code: {
control: 'boolean',
},
},
}
export default meta
Expand All @@ -43,95 +82,28 @@ type Story = StoryObj<typeof Typography.Link>

export const Primary: Story = {}

export const Code: Story = {
args: {
code: true,
},
}

export const Copyable: Story = {
args: {
copyable: true,
},
}

export const Deleted: Story = {
args: {
delete: true,
},
}

export const Disabled: Story = {
args: {
disabled: true,
},
}

export const Editable: Story = {
args: {
editable: true,
},
}

export const Keyboard: Story = {
args: {
keyboard: true,
},
}

export const Marked: Story = {
args: {
mark: true,
},
}

export const Strong: Story = {
args: {
strong: true,
},
}

export const Italic: Story = {
args: {
italic: true,
},
}

export const Success: Story = {
args: {
type: 'success',
},
}

export const Secondary: Story = {
args: {
type: 'secondary',
},
}

export const Warning: Story = {
args: {
type: 'warning',
},
}

export const Danger: Story = {
args: {
type: 'danger',
},
}

export const Underline: Story = {
args: {
underline: true,
},
}

export const CustomOnClick: Story = {
args: {
onClick: event => {
alert('Custom Click Handler')
},
export const InsideTooltip: Story = {
render: () => {
return (
<ExampleStory title="Link inside a Tooltip">
<Flex align="center" gap={2}>
<Typography.Text>Typography inside of a tooltip, hover icon to see</Typography.Text>
<Tooltip
title={
<>
<Typography.Text tooltip>
Help lorem ipsum{' '}
<Typography.Link href="/" tooltip>
Learn More
</Typography.Link>
</Typography.Text>
</>
}>
<Icon name="help" size="sm" />
</Tooltip>
</Flex>
</ExampleStory>
)
},
}

Expand Down
147 changes: 47 additions & 100 deletions src/components/general/Typography/Paragraph.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type Meta } from '@storybook/react'
import { type StoryObj } from '@storybook/react'
import type { Meta } from '@storybook/react'
import type { StoryObj } from '@storybook/react'
import { Typography } from 'src/components/general/Typography/Typography'
import { ExampleStory } from 'src/utils/ExampleStory'
import { useMemo } from 'react'
Expand All @@ -8,12 +8,16 @@ import { Radio } from 'src/components'
import { Switch } from 'src/components'
import { Slider } from 'src/components'
import { Icon } from 'src/components'
import { TypographyColors } from './colors'

const meta: Meta<typeof Typography.Paragraph> = {
title: 'Components/General/Typography.Paragraph',
title: 'Components/General/Typography/Paragraph',
component: props => <Typography.Paragraph {...props}>Paragraph text goes here</Typography.Paragraph>,

args: {
children: 'Example Text',
type: undefined,
color: undefined,
size: 'base',
code: false,
copyable: false,
delete: false,
Expand All @@ -23,17 +27,52 @@ const meta: Meta<typeof Typography.Paragraph> = {
mark: false,
strong: false,
italic: false,
type: undefined,
underline: false,
onClick: event => {
console.log('Paragraph Clicked')
},
},
argTypes: {
children: {
control: 'text',
name: 'text',
},
type: {
control: 'select',
options: ['secondary', 'success', 'warning', 'danger'],
},
size: {
control: 'select',
options: ['base', 'sm', 'lg', 'xl'],
},
color: {
control: 'select',
options: TypographyColors,
},
copyable: {
control: 'boolean',
},
delete: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
editable: {
control: 'boolean',
},
ellipsis: {
control: 'boolean',
},
mark: {
control: 'boolean',
},
strong: {
control: 'boolean',
},
italic: {
control: 'boolean',
},
code: {
control: 'boolean',
},
},
}
export default meta
Expand All @@ -47,98 +86,6 @@ type Story = StoryObj<typeof Typography.Paragraph>

export const Primary: Story = {}

export const Code: Story = {
args: {
code: true,
},
}

export const Copyable: Story = {
args: {
copyable: true,
},
}

export const DeletedLine: Story = {
args: {
delete: true,
},
}

export const Disabled: Story = {
args: {
disabled: true,
},
}

export const Editable: Story = {
args: {
editable: true,
},
}

export const Ellipsis: Story = {
args: {
ellipsis: true,
},
}

export const Marked: Story = {
args: {
mark: true,
},
}

export const Strong: Story = {
args: {
strong: true,
},
}

export const Italic: Story = {
args: {
italic: true,
},
}

export const Success: Story = {
args: {
type: 'success',
},
}

export const Secondary: Story = {
args: {
type: 'secondary',
},
}

export const Warning: Story = {
args: {
type: 'warning',
},
}

export const Danger: Story = {
args: {
type: 'danger',
},
}

export const Underline: Story = {
args: {
underline: true,
},
}

export const CustomOnClick: Story = {
args: {
onClick: event => {
alert('Custom Click Handler')
},
},
}

export const ExampleEditable: Story = {
render: () => {
const [editableStr, setEditableStr] = useState('This is an editable text.')
Expand Down
Loading

0 comments on commit f1c7d63

Please sign in to comment.