Skip to content

Commit

Permalink
Merge pull request #454 from pixiv/mimo/csf3-react-tagitem
Browse files Browse the repository at this point in the history 
TagItem story replace to csf3
  • Loading branch information
@mimokmt
mimokmt authored Feb 7, 2024
2 parents 073dff2 + c7c372f commit 0eda017
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 162 deletions.
3 changes: 0 additions & 3 deletions packages/react/src/components/TagItem/__snapshots__/index.story.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ exports[`Storyshots TagItem Default 1`] = `
>
<a
className="c0"
href=""
onClick={[Function]}
onDragStart={[Function]}
onKeyDown={[Function]}
Expand All @@ -119,11 +118,9 @@ exports[`Storyshots TagItem Default 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
rel=""
role="button"
size="M"
tabIndex={0}
target=""
>
<div
className="c1"
Expand Down
313 changes: 154 additions & 159 deletions packages/react/src/components/TagItem/index.story.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { action } from '@storybook/addon-actions'
import styled from 'styled-components'
import TagItem, { TagItemProps } from '.'
import { Story } from '../../_lib/compat'
import TagItem from '.'
import { Meta, StoryObj } from '@storybook/react'

export default {
title: 'TagItem',
Expand All @@ -13,160 +13,161 @@ export default {
},
},
},
}
render: function Render(args) {
return <TagItem {...args} />
},
} as Meta<typeof TagItem>

export const Default: Story<TagItemProps> = (props) => {
return <TagItem {...props} onClick={action('click')} />
}
Default.args = {
label: '#女の子',
bgColor: '#7ACCB1',
href: '',
rel: '',
target: '',
className: '',
export const Default: StoryObj<typeof TagItem> = {
args: {
label: '#女の子',
bgColor: '#7ACCB1',
},
}

export const Playground: Story<TagItemProps> = ({
bgColor,
label,
translatedLabel,
}) => {
return (
<div>
<Container>
<div>
<TagItem
label={label}
size="M"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
</Container>
<Container>
<div>
<TagItem
label={label}
size="M"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
</Container>
<Container>
<div>
<TagItem
label={label}
size="M"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
size="M"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
size="S"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
</div>
)
export const Playground: StoryObj<typeof TagItem> = {
render: function Render({ bgColor, label, translatedLabel }) {
return (
<div>
<Container>
<div>
<TagItem
label={label}
size="M"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
</Container>
<Container>
<div>
<TagItem
label={label}
size="M"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div />
</Container>
<Container>
<div>
<TagItem
label={label}
size="M"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
size="M"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
translatedLabel={translatedLabel}
size="M"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="default"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="active"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
<Container>
<div>
<TagItem
label={label}
size="S"
status="inactive"
bgColor={bgColor}
onClick={action('click')}
/>
</div>
<div>
<TagItem
label={label}
size="S"
status="inactive"
disabled
bgColor={bgColor}
onClick={action('click')}
/>
</div>
</Container>
</div>
)
},
args: {
label: '#女の子',
translatedLabel: 'girl',
bgColor: '#7ACCB1',
},
}

const Container = styled.div`
Expand All @@ -180,9 +181,3 @@ const Container = styled.div`
padding: 1em;
}
`

Playground.args = {
label: '#女の子',
translatedLabel: 'girl',
bgColor: '#7ACCB1',
}

0 comments on commit 0eda017

Please sign in to comment.