admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: use ComponentDecorator (#800)

Browse Source 
Related to #702
This commit is contained in:
Thaïs
2023-07-21 21:02:21 +02:00
committed by GitHub
parent 79fccb0404
commit 56cff63c4b
36 changed files with 777 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
View File

@ -1,18 +1,19 @@
import styled from '@emotion/styled';
import type { Meta, StoryObj } from '@storybook/react';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
import { ComponentDecorator } from '~/testing/decorators';
import { CellCommentChip } from '../CellCommentChip';
import { CommentChip } from '../CommentChip';
const meta: Meta<typeof CellCommentChip> = {
title: 'Modules/Comments/CellCommentChip',
component: CellCommentChip,
const meta: Meta<typeof CommentChip> = {
title: 'Modules/Comments/CommentChip',
component: CommentChip,
decorators: [ComponentDecorator],
args: { count: 1 },
};
export default meta;
type Story = StoryObj<typeof CellCommentChip>;
type Story = StoryObj<typeof CommentChip>;
const TestCellContainer = styled.div`
align-items: center;
@ -36,34 +37,38 @@ const StyledFakeCellText = styled.div`
white-space: nowrap;
`;
export const OneComment: Story = {
render: getRenderWrapperForComponent(<CommentChip count={1} />),
};
export const OneComment: Story = {};
export const TenComments: Story = {
render: getRenderWrapperForComponent(<CommentChip count={10} />),
args: { count: 10 },
};
export const TooManyComments: Story = {
render: getRenderWrapperForComponent(<CommentChip count={1000} />),
args: { count: 1000 },
};
export const InCellDefault: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
args: { count: 12 },
decorators: [
(Story) => (
<TestCellContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<Story />
</TestCellContainer>
),
],
};
export const InCellOverlappingBlur: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<StyledFakeCellText>
Fake long text to demonstrate ellipsis
</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
...InCellDefault,
decorators: [
(Story) => (
<TestCellContainer>
<StyledFakeCellText>
Fake long text to demonstrate ellipsis
</StyledFakeCellText>
<Story />
</TestCellContainer>
),
],
};