add icons story
This commit is contained in:
parent
b24f33898e
commit
dc9951c52b
|
@ -0,0 +1,48 @@
|
|||
import * as icons from '@status-im/icons'
|
||||
|
||||
import { Text } from '../typography'
|
||||
|
||||
import type { IconProps } from '@status-im/icons'
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import type React from 'react'
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
|
||||
const meta: Meta = {
|
||||
title: 'icons',
|
||||
// component: Button,
|
||||
argTypes: {},
|
||||
}
|
||||
|
||||
type Story = StoryObj
|
||||
|
||||
function unpascal(str: string) {
|
||||
return str.replace(/([A-Z])/g, ' $1').trim()
|
||||
}
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
|
||||
export const All: Story = {
|
||||
args: {},
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ display: 'grid', gap: 12 }}>
|
||||
{Object.keys(icons).map(name => {
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line import/namespace
|
||||
const Icon = icons[name] as React.FunctionComponent<IconProps>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={name}
|
||||
style={{ display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<Icon color="black" />
|
||||
<Text>{unpascal(name)}</Text>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
Loading…
Reference in New Issue